Button @astryx-svelte/core v0.3.0 · Button
Usage
Button triggers an action when clicked. Use it for form submissions, confirmations, navigation, or any interaction that needs a clear call to action.ts
Best practices
| 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. It is a separate component from Button, exported from '@astryx-svelte/core' alongside it. |
| 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. |
Examples
Common configurations, variations, and states.Button — Floating
A floating action button raised with
elevation="med". Use elevation for buttons that hover above content, like a FAB. Button — Sizes
Small, medium, and large buttons side by side. Use small in dense UIs like toolbars, medium for most cases, and large for prominent CTAs.
Button — Variants
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.
Button — End Slot
Buttons with a trailing badge showing a count or status. Use for notification counts, unread messages, or any button that needs a visual indicator.
Button — Icon
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".