Design System

Button

Buttons enable users to trigger actions. Use primary for high-emphasis actions, secondary for medium emphasis, tertiary for low emphasis, and destructive for dangerous actions.

Primary Button

High emphasis actions. Use for the main action in a view.

Specifications

Padding

8px 14px

Font Size

14px

Border Radius

6px

Font Weight

Medium 500

Gap With Icon

8px

Theming

Property

Token

Light

Dark

Background

--btn-primary-bg

brand.600

Background Hover

--btn-primary-bg-hover

brand.700

brand.500

Background Active

--btn-primary-bg-active

brand.800

brand.700

Background Disabled

--btn-primary-bg-disabled

gray.200

gray.800

Text

--btn-primary-text

white

Text Disabled

--btn-primary-text-disabled

gray.500

Focus Ring

--focus-ring

brand.600

Secondary Button

Medium emphasis actions. Use for secondary actions in a view.

Specifications

Padding

8px 14px

Font Size

14px

Border Radius

6px

Font Weight

Medium 500

Gap With Icon

8px

Theming

Property

Token

Light

Dark

Background

--btn-secondary-bg

transparent

Background Hover

--btn-secondary-bg-hover

gray.100

gray.700

Border

--btn-secondary-border

gray.200

gray.800

Border Disabled

--btn-secondary-border-disabled

gray.200

gray.700

Text

--btn-secondary-text

gray.800

gray.100

Text Disabled

--btn-secondary-text-disabled

gray.500

Focus Ring

--focus-ring

brand.600

Secondary Accent Variant

Secondary button with accent color for brand emphasis.

Specifications

Padding

8px 14px

Font Size

14px

Border Radius

6px

Font Weight

Medium 500

Gap With Icon

8px

Theming

Property

Token

Light

Dark

Border

--btn-secondary-accent-border

brand.600

brand.400

Text

--btn-secondary-accent-text

brand.600

brand.400

Focus Ring

--focus-ring

brand.600

Tertiary / Ghost Button / Icon

Low emphasis actions. Use for tertiary actions or icon-only buttons.

Specifications

Padding

8px 14px

Padding (Icon Only)

8px

Font Size

14px

Border Radius

6px

Font Weight

Medium 500

Gap With Icon

8px

Min Size

30px 30px

Theming

Property

Token

Light

Dark

Text

--btn-tertiary-text

gray.600

gray.400

Background Hover

--btn-tertiary-bg-hover

gray.100

gray.700

Background Active

--bg-active

gray.200

gray.600

Text Disabled

--text-disabled

gray.500

gray.400

Focus Ring

--focus-ring

brand.600

Destructive Button

Dangerous actions like delete, remove, or revoke. Use sparingly.

Specifications

Padding

8px 14px

Border Radius

6px

Font Size

14px

Font Weight

Medium 500

Gap With Icon

8px

Theming

Property

Token

Light

Dark

Background

--btn-destructive-bg

red.600

Background Hover

--btn-destructive-bg-hover

red.700

red.500

Text

--btn-destructive-text

white

Focus Ring

--focus-ring

brand.600

Best Practices

✓ Use one primary button per view

✓ Use clear, action-oriented labels

✓ Place primary actions on the right

✓ Use destructive buttons for dangerous actions

✓ Provide aria-label for icon-only buttons

Don't

✗ Don't use multiple primary buttons

✗ Don't use vague labels like "Click Here"

✗ Don't make buttons too small to tap

✗ Don't disable without explanation

✗ Don't use destructive color for non-destructive actions

Accessibility

WCAG AA Compliant

All button variants meet WCAG AA contrast requirements (4.5:1 minimum for text, 3:1 for focus indicators).

Keyboard Navigation

All buttons are focusable and can be activated with Enter or Space. Focus states use visible focus rings with 3:1 contrast.

Screen Reader Support

Use descriptive labels that clearly communicate purpose. Icon-only buttons require aria-label. Disabled buttons should include aria-disabled.