Button triggers an action when clicked. Use it for form submissions, confirmations, navigation, or any interaction that needs a clear call to action.
ts
| Guidance | Practices |
|---|---|
| Do | Reserve primary for the single most important action in the view. Use secondary or ghost for everything else based on emphasis. |
| Do | Write labels that describe the action ("Save changes", "Delete account", "Send invite"), not vague labels like "OK" or "Click here". |
| Do | Show a loading state for actions that take time, like saving or submitting, so the user knows it is working. |
| Do | Always provide a label for icon-only buttons so screen readers can announce what the button does. Add a tooltip for sighted users. |
| Do | For a dedicated icon-only button, use IconButton from '@astryxdesign/core/IconButton'. It is a separate component, not exported from '@astryxdesign/core/Button'. |
| Don't | Place more than one primary button in the same view; this dilutes the visual hierarchy. |
| Don't | Use the destructive variant without a confirmation step for irreversible actions like deleting data. |
| Don't | Use a button for navigation. If it only takes the user to another page, use a link instead. Buttons are for actions like saving, deleting, or submitting. |
Small, medium, and large buttons side by side. Use small in dense UIs like toolbars, medium for most cases, and large for prominent CTAs.
All 4 button variants in default, disabled, and loading states. Use primary for the main action, secondary for most others, ghost for low-emphasis, and destructive for dangerous actions.
Buttons with a trailing badge showing a count or status. Use for notification counts, unread messages, or any button that needs a visual indicator.
Buttons with a leading icon that reinforces the label. Use when the icon helps the user identify the action faster, like a plus for "New" or a trash can for "Delete".