Button

A clickable action control backed by semantic variants and tone utilities.

GitHub

Preview#

Controls

Variant

Size

Label

Focus

Disabled

Anatomy#

import { Button } from "raft-ui";

<Button />

Usage#

Variants#

States#

Sizes#

Icons#

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.

Loading#

Disabled#

API#WIP

Prop	Type	Default	Description
`variant`	"default" \| "primary" \| "outline" \| "information" \| "muted" \| "accent" \| "warning" \| "danger" \| "danger-secondary" \| "danger-outline" \| "ghost" \| "link"	"default"	Action semantics. Variants consume semantic layer and tone utilities.
`size`	"xs" \| "sm" \| "md" \| "lg" \| "icon-xs" \| "icon-sm" \| "icon-md" \| "icon-lg"	"md"	Text sizes scale height and padding; icon-* sizes render a square icon-only button.
`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).
`...props`	Base UI Button.Props	—	All native button attributes (onClick, disabled, type, etc.) plus Base UI props.