Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    Button

    Lets people start an action and makes the most important action in an area easy to find.

    Storybook
    Storybook
    Source
    Source

    Once versions are published, this page is generated from the release notes. Until then, changes are recorded by hand.

    Breaking

    • appearance is removed in favour of variant (primary, secondary, tertiary) and tone (neutral, danger). Migrate appearance="subtle" to variant="tertiary" and appearance="danger" to tone="danger".
    • Loading no longer sets aria-busy. The Button keeps its label as its name; when loading starts, a polite status region next to it announces loadingLabel once, or “Loading” without it.
    • startIcon and endIcon now take an element (ReactElement).

    Added

    • Press motion (motion.press): scales to 97 % while pressed and springs back on release; colours change in 110 ms.
    • success and successLabel: a check mark that grows once over the label when the action finishes, and “Done” (ui.button.success) announced once.
    • tone="danger" works with the secondary and tertiary variants, backed by the new color-action-danger-subtle-* and color-action-on-danger-subtle-default tokens.
    • Provider, which sets the language of the library’s own strings, and the data-component="button" attribute.
    • size="xs": 24 px height for in-cell actions; the button-height-xs, button-padding-inline-xs and button-icon-size-xs tokens.
    • variant="glass" and variant="glass-prominent".

    Changed

    • Heights are 32, 36 and 40 px; the default md is 36 px, 40 px on a touch screen. Corner radius is 10 px.
    • Focus shows as a 2 px outer focus outline with a 2 px gap (focus-outline).
    • The secondary look gets a small shadow.
    • On a coarse pointer (touch), the medium size is 44 px tall and the large size 48 px.

    Fixed

    • With both loading and disabled, loading wins: the Button stays focusable, has aria-disabled and draws no disabled fill.

    Added

    • First version: four appearances (primary, secondary, subtle, danger), three sizes, full width.
    • Built on the Base UI Button; type="button" by default.
    • Colours, sizes and the focus ring come from tokens; light and dark mode and brand switching need no extra setup.