Button
Buttons trigger actions, submit forms, and navigate through the application. Choose the variant that communicates the weight of the action.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
theme | 'light' | 'dark' | 'dark' | Per-component theme override. Overrides the global theme for this button instance. |
variant | 'primary' | 'secondary' | 'ghost' | 'danger' | 'primary' | Visual style variant of the button. |
size | 'sm' | 'md' | 'lg' | 'md' | Size tier. Controls height, padding, and font size. |
type | 'button' | 'submit' | 'reset' | 'button' | Native button type. Relevant when the button is inside a <form>. |
disabled | boolean | false | Puts the button in a disabled state. Blocks interaction and lowers opacity. |
loading | boolean | false | Replaces button content with a spinner and sets aria-busy. Blocks interaction. |
href | string | — | When provided, the button renders as an <a> anchor element instead of <button>. |
target | '_blank' | '_self' | '_parent' | '_top' | — | Link target. Only applicable when href is set. |
name | string | — | Native name attribute for form submission. Only relevant for button type. |
value | string | — | Native value attribute for form submission. Only relevant for button type. |
label | string | — | Accessible label. Use for icon-only buttons to provide a screen-reader-accessible name. |
hideLabel | boolean | false | Hides the slotted label visually. Used together with label to create icon-only buttons. |
Events
| Name | Detail type | Bubbles | Description |
|---|---|---|---|
click | MouseEvent | Yes | Native DOM click event. Suppressed (preventDefault + stopPropagation) when disabled or loading. Use onClick (React), @click (Vue), or (click) (Angular). |
Slots
| Name | Description |
|---|---|
| (default) | Button label text. Accepts plain text, icons, or mixed inline content. |
icon-start | Icon placed before the label. Use with a 16 × 16 px SVG icon component. |
CSS custom properties
Override these tokens on the host element or a parent selector to customise the button's appearance without modifying source styles.
| Property | Fallback | Description |
|---|---|---|
--diwa-button-bg | --diwa-accent | Background colour. |
--diwa-button-bg-hover | --diwa-accent-hover | Background colour on hover. |
--diwa-button-color | --diwa-text-inverse | Foreground (text and icon) colour. |
--diwa-button-radius | --diwa-radius-md | Border radius. |
--diwa-button-height | 40px | Height for the md size. |
--diwa-button-height-sm | 32px | Height for the sm size. |
--diwa-button-height-lg | 44px | Height for the lg size. |
--diwa-button-padding-x | 16px | Horizontal padding for md and lg sizes. |
--diwa-button-padding-x-sm | 10px | Horizontal padding for the sm size. |
--diwa-button-font-size | --diwa-font-size-base | Font size. |
--diwa-button-font-weight | --diwa-font-weight-medium | Font weight. |