Buttons
Buttons allow users to trigger actions with a single tap. They communicate calls to action to your users and allow them to interact with your interface.
Overview
Our button system provides a consistent way to trigger actions across the interface. Each variant serves a specific purpose and follows our design principles for interactive elements.
Variants
Our button system provides a consistent way to trigger actions across the interface. Each variant serves a specific purpose and follows our design principles for interactive elements.
Primary button
Use primary buttons for main calls to action. Limit primary buttons to one per view to maintain clear visual hierarchy.
<Button variant="primary">Primary button</Button>
<Button variant="primary" disabled>Primary disabled</Button>Secondary button
Use secondary buttons for supporting actions that need more emphasis than ghost buttons. These are commonly used for secondary actions alongside a primary button.
<Button variant="secondary">Secondary button</Button>
<Button variant="secondary" disabled>Secondary disabled</Button>Ghost button
Use ghost buttons for secondary actions or in places where a button needs to be less visually prominent. Perfect for actions within content areas or as tertiary actions.
<Button variant="ghost">Ghost button</Button>
<Button variant="ghost" disabled>Ghost disabled</Button>Destructive button
Use destructive buttons for actions that permanently delete data or have significant, irreversible consequences. They should be used sparingly and typically require confirmation.
<Button variant="destructive">Destructive button</Button>
<Button variant="destructive" disabled>Destructive disabled</Button>Ghost Destructive button
Use ghost destructive buttons for subtle remove/delete actions within content areas. Perfect for file lists, item removal, or secondary destructive actions.
<Button variant="ghost-destructive">Ghost Destructive button</Button>
<Button variant="ghost-destructive" disabled>Ghost Destructive disabled</Button>Info button
Use info buttons for informational actions or to provide additional context. Perfect for help actions, documentation links, or neutral informational dialogs.
<Button variant="info">Info button</Button>
<Button variant="info" disabled>Info disabled</Button>Colors & Theming
Each button variant uses specific colors from our design system. Here are the exact colors and CSS variables used for each button type, including their hex values for reference.
Primary Button
High-emphasis buttons for primary actions. Uses circuit bright yellow background with dark teal text for optimal contrast.
Secondary Button
Medium-emphasis buttons for secondary actions. Transparent background with border and primary text color.
Ghost Button
Low-emphasis buttons for tertiary actions. Minimal styling with brand color text on transparent background.
Destructive Button
High-emphasis buttons for destructive actions. Uses error color background with inverse text for strong contrast.
Ghost Destructive Button
Subtle destructive buttons for remove/delete actions. Transparent background with red text for low-emphasis destructive actions.
Info Button
Medium-emphasis buttons for informational actions. Uses blue color background with inverse text for good contrast.
Hover & Focus States
All buttons have hover, active, and focus states with slightly modified colors:
- • Hover: Backgrounds become lighter or more saturated
- • Active/Pressed: Backgrounds become darker or less saturated
- • Focus: Bright yellow focus ring (var(--focus-ring): #ffcf60)
- • Disabled: 60% opacity with pointer-events disabled
Sizes
Buttons come in three sizes to accommodate different use cases and layout needs. Use the appropriate size based on the context and importance of the action.
Size variants
Small buttons are ideal for tight spaces, medium (default) for most use cases, and large for prominent actions or touch targets.
// Small
<Button variant="primary" size="sm">Small button</Button>
// Medium (default)
<Button variant="primary" size="md">Default (medium)</Button>
// Large
<Button variant="primary" size="lg">Large button</Button>States
Buttons have different states to provide visual feedback and indicate interactivity. All buttons support hover, active (pressed), focus, and disabled states.
Interactive states
Buttons change appearance on hover and when pressed to provide clear feedback to users. Focus states are visible when navigating with keyboard.
<Button variant="primary">Hover me</Button>
<Button variant="secondary">Click and hold</Button>
<Button variant="ghost">Tab to focus</Button>Usage Guidelines
- Use only one primary button per view to maintain a clear hierarchy
- Ensure button text clearly describes the action it performs
- Use sentence case for button labels
- Keep button text concise - ideally 1-3 words
- For destructive actions, consider using a confirmation dialog
- Maintain consistent spacing between grouped buttons
- Use appropriate size based on context and touch target needs