Button

A button for triggering actions, with options for icons, intent, variant, size, and busy or pressed states.

Installation

import { Button } from "@o/pipeline/experimental/components/button";

Default

Icons

Don’t pass icons as children. Pass them to the button through these props:

1. iconStart (or the icon alias)
2. iconEnd

Give icon-only buttons an aria-label on the SVG element for accessibility.

intent

Change the button’s color scheme to signal the nature of the action.

• none (default): for neutral actions without a strong emphasis
• success: for actions that are positive or confirmatory in nature
• danger: for destructive or potentially negative actions

Combine with the variant prop to adjust the button’s appearance.

variant

Changes the aesthetics of the button to blend accordingly with the context of its usage.

variant="solid"

variant="ghost"

choice

Used for actions that display a value you choose, such as a Choice.

When a value isn’t set, also supply a placeholder attribute.

shape

Sets the button’s geometry along two independent axes: corner rounding and width.

Defaults to "square" for icon-only buttons (a single icon/iconEnd/collapsible, no other content) and "rectangle" otherwise.

The pinned shapes ("square"/"circle") lock width to height, so their content must fit a square box. They’re intended for a single icon. Adding text to one keeps the 1:1 lock and truncates rather than growing. For an elongated fully-rounded button, use "pill". The width pin also wins over stretch: a stretched "square"/"circle" stays 1:1, while a stretched "rectangle"/"pill" fills its container.

size

disabled

Prevent user interaction

pending

Indicate a busy or loading state, blocking interaction and replacing the content with a spinner.

pressed

Indicate an active or pressed state, such as a Menu trigger when its menu is open.

stretch

Fill the button to the width of its container

shrink

Allows the button to shrink smaller than its content if necessary to avoid overflow (true by default)

collapsible

Indicate to the user that the button toggles another element’s visibility with a visual cue (e.g. a caret that rotates when open).

Accepts either true (alias for { weight: "bold", transition: "right-down" }) or a config object:

• weight: "bold" (default) or "fill", the caret icon’s Phosphor weight.
• transition: "right-down" (default) or "down-up", the rotation the caret animates through when toggled between closed and open.

This can be combined with pressed where relevant.

render

Customize the underlying element to your needs

e.g. a link:

bleed

Allow the button to extend beyond its normal bounds via negative margins.