Skip to main content

Actions

Components that trigger actions or move users to another page.

Components

ComponentPurpose
ButtonTrigger an action (submit, cancel, delete, etc.)
Toggle groupMutually exclusive button group for switching views or modes
LinkNavigate to another page or section

Button

Types

  • button — triggers an action without form submission
  • submit — submits a form
  • reset — resets form values

Roles

  • primary — main action on the page
  • secondary — supporting action
  • danger — destructive or irreversible action

Design and accessibility

  • Use clear, specific labels (verb + noun)
  • One primary button per section
  • Danger buttons require confirmation for destructive actions
  • Minimum touch target: 44×44px
  • Focus indicator visible on keyboard navigation
  • Disabled buttons use aria-disabled, not the disabled attribute
Button anatomy
Send money
1
2
3
4
5
  1. 1Container
  2. 2Label text
  3. 3Leading icon
  4. 4Focus ring
  5. 5Touch target area
Button variants
Button states
Primary
Secondary
Ghost / Tertiary
Destructive
Button specs
Send money
padding: 0 24px
48px
min-width: 80px
Dimensions
Min height48px
Min width80px
Padding H16–24px
Border radius6px
Icon-text gap8px
Typography
Font size16px (1rem)
Font weight600 (SemiBold)
Line height24px
Focus ring
TypeInner border 3px
Offset2px
Touch target48px (AAA)
Send money
ring: 3px
offset: 2px
Icon + label / Icon-only
Full-width button

Toggle group

Mutually exclusive set of toggle buttons — only one (or none) can be active at a time.

  • Used for view switching (List / Grid), time period selection (Day / Week / Month)
  • Single-select by default; can support multi-select
  • Supports icon-only and text variants
  • Active item is visually distinct from inactive items
  • Keyboard navigable with arrow keys within the group
Toggle group — view switch
Toggle group — time period

Inline text actions used for secondary navigation and contextual operations. All link buttons use <Button variant="link">.

Usage

  • Use for secondary actions below primary buttons (Back to home, Edit payment method)
  • Use destructive variant for irreversible actions (Delete contact, Remove method, Cancel transfer)
  • Icon placement is always inline-start (left of text)
  • Never use for primary page actions — use <Button> instead

Variants

VariantClassColorExample
Defaultbasevar(--ds-link)Forgot password?, Back to home
With iconbasevar(--ds-link)+ Add payment method
Destructive.link-destructivevar(--ds-red-600)Delete contact, Remove method

Style

PropertyValue
Font sizevar(--ds-text-sm) — 14px
Font weightvar(--ds-font-semibold) — 600
Default stateUnderline, offset 2px
HoverColor var(--ds-primary-hover)
Disabledvar(--ds-gray-400), no underline
Heightauto (no min-height)
Padding0 (no horizontal padding)
Link styles
Default
With icon
Destructive
Inline (in body text)

View your transaction history or download a statement.

Design and accessibility

  • Link text must describe the action or destination
  • Avoid generic text ("click here", "read more")
  • Destructive links must use both color and text to convey intent (not color alone)
  • Minimum touch target: 48px height when standalone (use h-12 class)
  • Focus indicator visible on keyboard navigation