Button

Button/Primary is a high‑emphasis button that initiates the primary action on a screen.

Use when the action is the most important on the page, such as submitting a form or confirming a dialog.
Use for single‑tap interactions that complete immediately without navigating to a new context.
Use when you need a distinct visual cue that draws attention.

Don’t use for navigation; choose a Link component instead.
Don’t use for toggling state; use a Switch or Checkbox.
Don’t use for secondary or less critical actions; choose Button/Secondary instead.

Variant	Description	When to use
`Color`	Sets the button’s color scheme. Options: `Accent`, `Negative`, `Primary`, `Secondary`, `Static White`, `Static Black`.	Choose a color that matches the intent of the action (e.g., `Negative` for destructive actions).
`State`	Visual state of the button. Options: `Default`, `Hover`, `Touch`, `Focus`, `Disabled`.	Use the appropriate state based on interaction; `Disabled` when the action is unavailable.
`Outlined`	Renders the button with an outline instead of a solid fill. Options: `False`, `True`.	Use `True` for a less prominent primary action that still needs emphasis.
`Label`	Controls whether the button displays its label text. Options: `True`, `False`.	Hide the label when an icon alone conveys the meaning.
`Icon`	Controls whether an icon appears alongside the label. Options: `True`, `False`.	Show an icon to reinforce the action’s purpose.

Prop	Type	Default	Description
`Icon`	`instance`	`41:35049`	Instance swap for the icon displayed in the button.
`Label`	`string`	`"Action"`	Text shown on the button when `Label` is `True`.
`Color`	`enum`	`"Accent"`	Determines the button’s color palette.
`State`	`enum`	`"Default"`	Current interaction state of the button.
`Outlined`	`boolean`	`false`	If `true`, renders the button with an outline style.
`Label?`	`boolean`	`true`	Shows (`true`) or hides (`false`) the label text.
`Icon?`	`boolean`	`false`	Shows (`true`) or hides (`false`) the icon.

The button uses the native button role and is operable via keyboard (Space or Enter).
Provide a clear, concise Label or aria-label so screen readers announce the action.
When Disabled, set aria-disabled="true" and ensure the visual style indicates non‑interactive state.
Verify that each Color variant meets a minimum contrast ratio of 4.5:1 against its background.
If Outlined is true, preserve a visible focus ring to meet focus‑visible requirements.

Changelog