Button

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

When to use

Use a button for primary actions that complete a task, such as submitting a form.
Use the Outline or Ghost style for secondary actions that are less critical than the primary button.
Use the Icon variant when space is limited and the action can be conveyed by an icon alone.
Use the Large size for prominent calls‑to‑action and Small size for inline or toolbar actions.

When not to use

Don't use a button for navigation; use a link component instead.
Don't use a button for toggling on/off states; use a Switch or Checkbox.
Don't use the Loading state without providing a visual indicator, such as a spinner, to convey progress.

Variant	Description	When to use
Filled	Solid background with content color.	Primary actions that need emphasis.
Outline	Transparent background with a visible border.	Secondary actions that should appear less dominant.
Ghost	No border, subtle background on hover.	Minimal emphasis in dense UI areas.
Icon	Icon‑only button, no label.	Compact toolbars or when an icon clearly conveys the action.

Variant	Description	When to use
Primary	Highlights the main brand color.	Default for most actions.
Neutral	Low‑contrast, muted tone.	Non‑critical actions.
Error	Red tint indicating a destructive or error‑related action.	Confirming deletions or error handling.
Success	Green tint for positive outcomes.	Confirming successful operations.
Warning	Amber tint for cautionary actions.	Alerting users to potential issues.
Info	Blue tint for informational actions.	Providing supplemental information.

Variant	Description	When to use
Default	Regular interactive state.	Standard button behavior.
Disabled	Non‑interactive, dimmed appearance.	When the action is unavailable.
Focus	Visible focus ring for keyboard navigation.	Always present when the button receives focus.
Hover	Highlight on pointer hover.	Enhances discoverability.
Loading	Shows a spinner and prevents interaction.	While an asynchronous operation is in progress.
Pressed	Depressed visual feedback on activation.	Provides tactile response during click/tap.

Variant	Description	When to use
Large	Tallest height and widest padding.	Prominent calls‑to‑action.
Medium	Balanced height and padding.	General‑purpose buttons.
Small	Compact height and minimal padding.	Inline actions or toolbar buttons.

Props / API

Prop	Type	Default	Description
`style`	`"Filled" \| "Outline" \| "Ghost" \| "Icon"`	`"Filled"`	Determines the visual style of the button.
`color`	`"Primary" \| "Neutral" \| "Error" \| "Success" \| "Warning" \| "Info"`	`"Primary"`	Sets the semantic color theme.
`state`	`"Default" \| "Disabled" \| "Focus" \| "Hover" \| "Loading" \| "Pressed"`	`"Default"`	Represents the visual state of the button.
`size`	`"Large" \| "Medium" \| "Small"`	`"Large"`	Controls the button’s size.

Accessibility

Ensure the button has an accessible name that describes its action, either via visible text or an aria-label.
The button must be reachable via keyboard and display a focus indicator when focused.
When state is Loading, provide an accessible label such as aria-busy="true" and include a visible spinner.
Use sufficient color contrast for the chosen color variant against its background, meeting WCAG AA minimums.
Do not rely on color alone to convey state; combine with text, icons, or ARIA attributes.

Changelog