Button
Buttons trigger actions, submit forms, and navigate through the application. Choose the variant that communicates the weight of the action.
Keyboard interaction
| Key | Action |
|---|---|
| Tab | Move focus to the button. |
| Shift + Tab | Move focus away from the button to the previous element. |
| Enter / Space | Activate the button, triggering the click event. No-op when disabled or loading. |
Screen reader behaviour
The component uses shadow: { delegatesFocus: true } to forward focus from the host element to the inner <button> or <a>. This means screen readers announce the correct role (button or link) regardless of the custom element wrapper.
| Attribute / Property | Value / Behaviour |
|---|---|
role | button (native <button>) or link (when href is set) |
aria-disabled | Set to "true" when disabled={true} on a link-variant button (<a>). |
aria-busy | Set to "true" when loading={true} to communicate async activity. |
aria-label | Forwarded from the label prop — use for icon-only buttons to provide an accessible name. |
WCAG 2.2 compliance
1.4.3 Contrast (Minimum) — AAPass
All variant foreground/background colour pairs meet the 4.5:1 minimum contrast ratio.
1.4.11 Non-text Contrast — AAPass
Focus ring (--diwa-border-focus) has ≥ 3:1 contrast against adjacent colours in both themes.
2.1.1 Keyboard — APass
All functionality is operable via keyboard alone (Tab / Enter / Space).
2.4.7 Focus Visible — AAPass
A visible focus ring is always shown on keyboard focus using :focus-visible styles.
4.1.2 Name, Role, Value — APass
Native button/link semantics are preserved inside Shadow DOM with delegatesFocus.
Best practices
- Always provide a visible label. For icon-only buttons, set the
labelprop andhide-labelto ensure screen readers can announce the purpose. - Don't disable focus ring. Avoid
outline: noneon the host element — the internal:focus-visiblestyle is already appropriately scoped. - Communicate disabled state clearly. The
disabledstate reduces opacity and sets the cursor tonot-allowed. Always ensure users understand why an action is unavailable, using a tooltip or helper text nearby.