Button
A clickable action control backed by semantic variants and tone utilities.
Controls
import { Button } from "raft-ui";
<Button />Place data-icon="inline-start" or data-icon="inline-end" on an icon beside text so its side padding tightens automatically. It is a child-icon attribute, not a Button prop.
variant="on-frame" is the frameless button on the yellow frame: the rail, the web top bar and the desktop title bar. It takes the frame's ink and lays frame-pressed on hover, on press and while its popup is open. There the 32px sizes become the 36px frame item with a 20px icon. A disabled frameless icon button, here or on paper, only greys its icon; disabled text buttons keep the sunken box.
variantdefault: "default""default" | "primary" | "outline" | "information" | "muted" | "accent" | "warning" | "success" | "danger" | "danger-secondary" | "danger-outline" | "ghost" | "on-frame" | "link"
Action semantics. Variants consume semantic layer and tone utilities.
sizedefault: "md""md" | "lg" | "xl" | "inline" | "icon-md" | "icon-lg"
md is 32px and lg 44px (dialog and sheet footers, forms); xl is a full-width call to action; inline sits in a line of text. icon-md and icon-lg render a square icon-only button. xs and sm are old names of md, and icon-xs and icon-sm of icon-md: same render.
loadingdefault: falseboolean
Shows an inline Spinner, preserves button width, and disables interaction.
loadingLabeldefault: "Loading"string
Accessible label for the loading indicator.
renderReactElement | (props, state) => ReactElement
Replace the rendered element or compose with another component (Base UI).
focusableWhenDisableddefault: falseboolean
Base UI. Uses aria-disabled instead of the native attribute so the button keeps pointer events and focus — use it when a wrapping Tooltip must explain why the action is unavailable. Appearance is identical to the native-disabled path.
...propsBase UI Button.Props
All native button attributes (onClick, disabled, type, etc.) plus Base UI props.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "primary" | "outline" | "information" | "muted" | "accent" | "warning" | "success" | "danger" | "danger-secondary" | "danger-outline" | "ghost" | "on-frame" | "link" | "default" | Action semantics. Variants consume semantic layer and tone utilities. |
size | "md" | "lg" | "xl" | "inline" | "icon-md" | "icon-lg" | "md" | md is 32px and lg 44px (dialog and sheet footers, forms); xl is a full-width call to action; inline sits in a line of text. icon-md and icon-lg render a square icon-only button. xs and sm are old names of md, and icon-xs and icon-sm of icon-md: same render. |
loading | boolean | false | Shows an inline Spinner, preserves button width, and disables interaction. |
loadingLabel | string | "Loading" | Accessible label for the loading indicator. |
render | ReactElement | (props, state) => ReactElement | — | Replace the rendered element or compose with another component (Base UI). |
focusableWhenDisabled | boolean | false | Base UI. Uses aria-disabled instead of the native attribute so the button keeps pointer events and focus — use it when a wrapping Tooltip must explain why the action is unavailable. Appearance is identical to the native-disabled path. |
...props | Base UI Button.Props | — | All native button attributes (onClick, disabled, type, etc.) plus Base UI props. |