operate ˗ˏˋ design ˎˊ-

© 2026 Operate Machine, Co.

Button

Installation

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

Default

Icons

Icons should not be supplied as children, and should be supplied to the button via the following props:

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

Icon-only buttons must have an aria-label specified on the SVG element for accessibility.

intent

Change the color scheme of a button to visually cue the user on 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…

variant

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

variant="solid"

intent="none"
    • size="sm"
    • size="md"
    • size="lg"
    • stretchsize="sm"
    • stretchsize="md"
    • stretchsize="lg"
intent="success"
    • size="sm"
    • size="md"
    • size="lg"
    • stretchsize="sm"
    • stretchsize="md"
    • stretchsize="lg"
intent="danger"
    • size="sm"
    • size="md"
    • size="lg"
    • stretchsize="sm"
    • stretchsize="md"
    • stretchsize="lg"

variant="ghost"

intent="none"
    • size="sm"
    • size="md"
    • size="lg"
    • stretchsize="sm"
    • stretchsize="md"
    • stretchsize="lg"
intent="success"
    • size="sm"
    • size="md"
    • size="lg"
    • stretchsize="sm"
    • stretchsize="md"
    • stretchsize="lg"
intent="danger"
    • size="sm"
    • size="md"
    • size="lg"
    • stretchsize="sm"
    • stretchsize="md"
    • stretchsize="lg"

rounded

Applies fully rounded corners to the button, creating a circle or pill shape.

Currently only intended for use with icon-only buttons.

size

disabled

Prevent user interaction

Note

For elements that don’t support the disabled attribute — such as <a> elements — we mimic disabled behavior by disabling pointer events completely.

pending

Indicate a busy or loading state, preventing interaction and providing feedback to the user — replacing content with a spinner.

pressed

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

Note

This is not applied automatically when combined with collapsible and an open state to provide additional flexibility.

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).

This can be combined with pressed where relevant.

collapsible(default, alias for bold)
    • size="sm"
    • size="md"
    • size="lg"
    • stretchsize="sm"
    • stretchsize="md"
    • stretchsize="lg"
collapsible={{"weight":"bold"}}
    • size="sm"
    • size="md"
    • size="lg"
    • stretchsize="sm"
    • stretchsize="md"
    • stretchsize="lg"
collapsible={{"weight":"fill"}}
    • size="sm"
    • size="md"
    • size="lg"
    • stretchsize="sm"
    • stretchsize="md"
    • stretchsize="lg"
collapsible={{"weight":"fill","transition":"down-up"}}
    • size="sm"
    • size="md"
    • size="lg"
    • stretchsize="sm"
    • stretchsize="md"
    • stretchsize="lg"

render

Customize the underlying element to your needs

e.g. a link:

render={<a href="#" />}

bleed

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

bleed={false} (default)
    • size="sm"
    • size="md"
    • size="lg"
    • stretchsize="sm"
    • stretchsize="md"
    • stretchsize="lg"
bleed (all sides)
    • size="sm"
    • size="md"
    • size="lg"
    • stretchsize="sm"
    • stretchsize="md"
    • stretchsize="lg"
bleed="top"
    • size="sm"
    • size="md"
    • size="lg"
    • stretchsize="sm"
    • stretchsize="md"
    • stretchsize="lg"
bleed="end"
    • size="sm"
    • size="md"
    • size="lg"
    • stretchsize="sm"
    • stretchsize="md"
    • stretchsize="lg"
bleed="bottom"
    • size="sm"
    • size="md"
    • size="lg"
    • stretchsize="sm"
    • stretchsize="md"
    • stretchsize="lg"
bleed="start"
    • size="sm"
    • size="md"
    • size="lg"
    • stretchsize="sm"
    • stretchsize="md"
    • stretchsize="lg"
bleed="x"
    • size="sm"
    • size="md"
    • size="lg"
    • stretchsize="sm"
    • stretchsize="md"
    • stretchsize="lg"
bleed="y"
    • size="sm"
    • size="md"
    • size="lg"
    • stretchsize="sm"
    • stretchsize="md"
    • stretchsize="lg"

Migration Guide

When migrating from @o/pipeline/legacy/components/button to @o/pipeline/experimental/components/button, follow these steps:

  1. variant

    • variant="primary" → variant="solid"
    • variant="secondary" → variant="solid"
    • variant="outline" → variant="solid"
    • variant="success" → variant="solid" intent="success"
    • variant="danger" → variant="solid" intent="danger"
    • variant="ghost" → variant="ghost"
    • variant="dashed" → no equivalent, only adjust any default sizes to sm for consistency with new button sizing.

  2. size

    • default → md
    • sm → md
    • xs → sm

  3. fluid → stretch

  4. Icons

    • icon + iconPosition="start" → iconStart
    • icon + iconPosition="end" → iconEnd

  5. asChild → render (see render for details)

  6. Usage with PendingText → use pending prop instead with the same content rather than changing based on pending state.

  7. Changing the button background based on the trigger’s active state (e.g. opening a dropdown menu) → use the pressed prop on the button and control it based on the trigger’s state (e.g. open or not)

  8. Collapsible triggers (e.g. for an accordion) → use the collapsible prop on the button and control it based on the trigger’s state (e.g. open or not). Only use pressed if the background was previously changing based on the trigger’s active state.

  9. className="rounded-full" → rounded

Implementation Notes

  • We’ve deliberately decided to omit the className and style props from a component

    • This is the first time we’re doing this
    • We’re hoping it acts as a mechanism for design feedback — forcing us to choose from existing variants or adjust accordingly.

  • Safari doesn’t handle 0.5px shadows too well on SVGs, but we’re happy to accept this trade-off and fallback to no shadow for these cases.