Buttons

Interactive elements for actions and navigation. All buttons meet WCAG 2.1 Level AA with proper focus indicators and touch targets.

Button Variants

Four main variants for different emphasis levels.

Button Sizes

Five sizes from extra small to extra large. Mobile-safe sizes (md and above) meet 44px touch target requirement.

Buttons with Icons

Icons can be positioned left, right, or used alone.

Icon-only Buttons

Compact icon buttons for toolbars and tight spaces. Always include aria-label for accessibility.

Button States

All interactive states with proper visual feedback.

Interactive States

Disabled & Loading

Success Variant

For positive actions and confirmations.

Full-width Buttons

Spans full width of container, useful for mobile layouts and forms.

Button Groups

Multiple buttons grouped together for related actions.

Horizontal Group

Vertical Group

Danger Variant

Use variant="danger" for destructive actions. It uses an opacity-based red that works in both light and dark mode without a harsh solid-red background.

Danger Button

vue

<DsButton variant="danger" @click="deleteTask">Delete Task</DsButton>

Token Mapping

How button tokens flow through the three-layer system: value → primitive → semantic → component.

Background

#f4f4f5→zinc-100→--primary→--button-primary-bg

Text

#09090b→zinc-950→--primary-foreground→--button-primary-text

Hover bg

#ffffff→white→--foreground→--button-primary-hover

Focus ring

#3f3f46→zinc-700→--ring→--button-primary-ring

Ring offset

#09090b→zinc-950→--background→--button-primary-ring-offset

PrimitiveSemanticComponent

Buttons ​