Button
Buttons trigger actions. Use the primary style for the main action, others for lower-emphasis actions.
Variants
Use the variant prop to change button emphasis. Use brand for primary actions, outline or muted for secondary actions, ghost for tertiary actions, destructive for dangerous actions, and text or link for minimal styling.
Sizes
Use the size prop to control button dimensions. Available sizes are xxs, xs, sm, md, and lg.
With Icons
Use prefix to add an icon before the label or suffix to add one after.
Loading
Use the loading prop to show a spinner and disable interaction during async operations.
Disabled
Use the disabled prop to prevent interaction when the action is unavailable.
Icon Only
Use the iconOnly prop to create square buttons containing only an icon. Always provide an aria-label for accessibility.
Rounded
Use the rounded prop to create pill-shaped buttons with fully rounded corners.