Component

Button

Buttons trigger an action — submitting a form, opening a dialog, or confirming a destructive change. Each button pairs an intent variant with a support treatment and a size, all driven by the --components-button-color-* tokens.

Storybook
Playground
Variant
Support
Size
State
Left icon
Right icon
Label
Preview
JSX
<Button
  variant="primary"
  support="default"
  size="sm"
  showLeftIcon
  showRightIcon
>
  Button
</Button>

Props

The full ButtonProps API. Color, typography, and border are driven by the variant and support props — never via className.

PropTypeDefaultDescription
variant
'primary' | 'error' | 'warning' | 'success' | 'information' | 'icon-primary' | 'icon-error' | 'icon-warning' | 'icon-success' | 'icon-info''primary'Button intent — controls the --components-button-color-* tokens. The icon-* variants render a square, label-less button (require aria-label) and reuse the matching colour. Use 'error' only for destructive actions.
support
'default' | 'subtle' | 'ghost' | 'outline''default'Surface treatment: filled ('default'), tinted fill ('subtle'), transparent ('ghost'), or bordered ('outline').
size
'sm' | 'md' | 'lg''sm'Height + typography scale: 36px / 44px / 56px. Avoid 'lg' inside cards or sidebars.
state
'default' | 'loading' | 'disabled''default''loading' shows a spinner and sets aria-busy; 'disabled' greys the control and removes interaction.
label
string'Button'Convenience text label. Used when no children are passed.
children
ReactNode—Label content. Takes precedence over label.
showLeftIcon
booleantrueShow the leading icon slot (defaults to a plus icon).
showRightIcon
booleantrueShow the trailing icon slot (defaults to a plus icon).
leftIcon
ReactNode—Custom leading icon. Inherits the label color via fill-current.
rightIcon
ReactNode—Custom trailing icon. Inherits the label color via fill-current.
loadingLabel
string'Loading'Label shown while state="loading". Falls back to the normal label.
type
'button' | 'submit' | 'reset''button'Native button type. Always set 'submit' for the submit trigger in a form.
onClick
() => void—Click handler. Ignored while loading or disabled.
className
string—Layout-only classes (margin, width, positioning). Never pass color, typography, or border styles.