Button
Buttons trigger actions, submit forms, and navigate through the application. Choose the variant that communicates the weight of the action.
When to use
Do
- ✓Trigger a one-time action like submitting a form or confirming a dialog.
- ✓Use a primary button for the single most important action on a page.
- ✓Use secondary or ghost for supporting or complementary actions.
- ✓Use danger for destructive or irreversible actions.
- ✓Pair a loading button with async operations to prevent duplicate submissions.
Don't
- ✕Don't use more than one primary button in a single view.
- ✕Don't use a button for in-page navigation — use a link instead.
- ✕Don't rely on colour alone to communicate variant meaning.
- ✕Don't use long sentences as button labels — keep them short and action-oriented.
- ✕Don't nest interactive elements inside a button.
Variants
Primary
The highest-emphasis action. Use only once per page section to guide the user toward the main goal.
<diwa-button variant="primary">Save changes</diwa-button>Secondary
Medium emphasis. Use for supporting actions that complement a primary action, such as Cancel next to Save.
<diwa-button variant="secondary">Cancel</diwa-button>Ghost
Lowest emphasis — no visible fill. Use for tertiary actions or icon-only buttons in tight spaces where adding visual weight would overwhelm the layout.
<diwa-button variant="ghost">More options</diwa-button>Danger
Reserved for destructive or irreversible actions like Delete or Remove. Always confirm before executing with a dialog or popover.
<diwa-button variant="danger">Delete account</diwa-button>Sizes
Choose the size based on the context. The default md works for most cases. Use sm inside tables, toolbars, or compact UI zones. Use lg for prominent hero calls-to-action.
<!-- Small — for dense UI contexts -->
<diwa-button size="sm">Compact</diwa-button>
<!-- Medium — default -->
<diwa-button size="md">Standard</diwa-button>
<!-- Large — for hero/landing contexts -->
<diwa-button size="lg">Get Started</diwa-button>Loading state
Set loading to show an inline spinner and disable the button while an async operation is in progress. The button will emit click again once loading is cleared.
<diwa-button loading>Saving…</diwa-button>As a link
When an href prop is provided the component renders as an <a> element with full button styling. Use this for primary navigation CTAs.
<diwa-button href="/dashboard" target="_blank">
Open Dashboard
</diwa-button>