XDS — Design System

Button@xds/core v0.0.13 · XDSButton

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
import {XDSButton} from '@xds/core/Button'

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.
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 — 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

Usage

Button triggers an action when clicked. Use it for form submissions, confirmations, navigation, or any interaction that needs a clear call to action.

import {XDSButton} from '@xds/core/Button'

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.
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.