Button
Action control with native <button> or <a> semantics, variants, loading, and slots for icon/badge.
Properties
| Property | Attribute | Description | Type name | Type | Default |
|---|---|---|---|---|---|
variant | variant | `primary` | `default` | `success` | `danger` | `warning` | `info` | `light` | `dark` | `transparent` | `ghost` (omit for default outline style) | DuoButtonVariant | "primary" | "default" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "transparent" | "ghost" | "default" |
size | size | `s` | `m` | `l` | DuoButtonSize | "s" | "m" | "l" | "m" |
type | type | `button` | `submit` | `reset` (button mode only) | DuoButtonType | "button" | "submit" | "reset" | "button" |
disabled | disabled | Disables the control | boolean | boolean | false |
loading | loading | Busy state (`aria-busy`), non-interactive, shows spinner | boolean | boolean | false |
isLoading | is-loading | Alias for `loading` (migration helper) | boolean | boolean | false |
outline | outline | Outline presentation for supported variants | boolean | boolean | false |
square | square | Compact square control (icon in slot); pair with `aria-label` or `aria-labelledby` | boolean | boolean | false |
block | block | Full width | boolean | boolean | false |
href | href | When non-empty, the control renders as `<a href="…">` instead of `<button>`. | string | string | "" |
target | target | Link target (e.g. `_blank`); safe `rel` defaults apply for `_blank` | string | string | "" |
rel | rel | Link relationship; merged with defaults when `target="_blank"` | string | string | "" |
label | label | Text fallback when default slot is empty | string | string | "" |
accessibleLabel | aria-label | Mirrors host `aria-label` for Lit updates; forwarded to the inner control (use `aria-label` in markup). | string | undefined | string | undefined | — |
labelledBy | aria-labelledby | Mirrors host `aria-labelledby`; forwarded to the inner control. | string | undefined | string | undefined | — |
form | form | Id of the form to submit or reset. Reflected as the HTML `form` attribute on the host. When `type` is `submit` or `reset`, a click handler calls `requestSubmit()` / `reset()` on the resolved form, because the native `<button>` inside shadow DOM is not a reliable submitter in all browsers. | string | string | "" |
formTarget | form-target | Legacy alias; use `form` instead. | string | string | "" |
Slots
| Name | Description |
|---|---|
default | Visible label text (omit when using `square` with `aria-label`) |
icon | Leading icon (e.g. `<duo-icon>`). Slotted `duo-icon` without `size` defaults to `l`. |
badge | Trailing badge or count (e.g. `<duo-badge>` or `<span>`) |
Usages
Buttons are used to trigger actions or events within the interface. They help users interact with the system, such as submitting forms, navigating to a new page, or performing specific tasks.
- Primary variant: Used for the main action on a page, such as “Submit” or “Next.” Only one primary button should be used per section to emphasize the most important action (main call-to-action).
- Default variant: Used for less prominent actions, providing alternatives to the primary action.
Disabled: Indicates an action that is not currently available. Disabled buttons are unclickable and visually distinct.
Other Considerations
- Text clarity: Ensure the button text clearly describes the action it will trigger. Use verbs like “Save,” “Delete,” or “Learn more.”
- Consistent text: Button labels should be concise, ideally no more than 2-3 words.
- Action-oriented: Button text should be specific and action-oriented (e.g., use “Submit form” rather than just “Submit” when appropriate).