Buttons

Buttons are key interactive elements in the design system. Below is a table showing the different states, token names, and their corresponding color values.

brand

Preview	State	Design Token Name	Color Value	Color Preview
	Enabled	--interactive-primary-brand-enabled	#ccc
	Hovered	--interactive-primary-brand-hovered	#ccc
	Focused	--interactive-primary-brand-focused	#ccc
	Pressed	--interactive-primary-brand-pressed	#ccc
	Ring	--interactive-primary-brand-ring	#ccc
	Label	--interactive-primary-brand-label	#ccc
	Accent	--interactive-primary-brand-accent	#ccc

product

Preview	State	Design Token Name	Color Value	Color Preview
	Enabled	--interactive-primary-product-enabled	#ccc
	Hovered	--interactive-primary-product-hovered	#ccc
	Focused	--interactive-primary-product-focused	#ccc
	Pressed	--interactive-primary-product-pressed	#ccc
	Ring	--interactive-primary-product-ring	#ccc
	Label	--interactive-primary-product-label	#ccc
	Accent	--interactive-primary-product-accent	#ccc

secondary

Preview	State	Design Token Name	Color Value	Color Preview
	Enabled	--interactive-primary-secondary-enabled	#ccc
	Hovered	--interactive-primary-secondary-hovered	#ccc
	Focused	--interactive-primary-secondary-focused	#ccc
	Pressed	--interactive-primary-secondary-pressed	#ccc
	Ring	--interactive-primary-secondary-ring	#ccc
	Label	--interactive-primary-secondary-label	#ccc
	Accent	--interactive-primary-secondary-accent	#ccc

info

Preview	State	Design Token Name	Color Value	Color Preview
	Enabled	--interactive-primary-info-enabled	#ccc
	Hovered	--interactive-primary-info-hovered	#ccc
	Focused	--interactive-primary-info-focused	#ccc
	Pressed	--interactive-primary-info-pressed	#ccc
	Ring	--interactive-primary-info-ring	#ccc
	Label	--interactive-primary-info-label	#ccc
	Accent	--interactive-primary-info-accent	#ccc

success

Preview	State	Design Token Name	Color Value	Color Preview
	Enabled	--interactive-primary-success-enabled	#ccc
	Hovered	--interactive-primary-success-hovered	#ccc
	Focused	--interactive-primary-success-focused	#ccc
	Pressed	--interactive-primary-success-pressed	#ccc
	Ring	--interactive-primary-success-ring	#ccc
	Label	--interactive-primary-success-label	#ccc
	Accent	--interactive-primary-success-accent	#ccc

warning

Preview	State	Design Token Name	Color Value	Color Preview
	Enabled	--interactive-primary-warning-enabled	#ccc
	Hovered	--interactive-primary-warning-hovered	#ccc
	Focused	--interactive-primary-warning-focused	#ccc
	Pressed	--interactive-primary-warning-pressed	#ccc
	Ring	--interactive-primary-warning-ring	#ccc
	Label	--interactive-primary-warning-label	#ccc
	Accent	--interactive-primary-warning-accent	#ccc

critical

Preview	State	Design Token Name	Color Value	Color Preview
	Enabled	--interactive-primary-critical-enabled	#ccc
	Hovered	--interactive-primary-critical-hovered	#ccc
	Focused	--interactive-primary-critical-focused	#ccc
	Pressed	--interactive-primary-critical-pressed	#ccc
	Ring	--interactive-primary-critical-ring	#ccc
	Label	--interactive-primary-critical-label	#ccc
	Accent	--interactive-primary-critical-accent	#ccc

neutral

Preview	State	Design Token Name	Color Value	Color Preview
	Enabled	--interactive-primary-neutral-enabled	#ccc
	Hovered	--interactive-primary-neutral-hovered	#ccc
	Focused	--interactive-primary-neutral-focused	#ccc
	Pressed	--interactive-primary-neutral-pressed	#ccc
	Ring	--interactive-primary-neutral-ring	#ccc
	Label	--interactive-primary-neutral-label	#ccc
	Accent	--interactive-primary-neutral-accent	#ccc

Each button state uses a design token from the Figma system, ensuring consistency across the UI.

Usage Guidelines

Buttons are essential for user interaction and should be used consistently throughout the UI. Follow these guidelines:

• Primary Buttons: Used for main actions, such as submitting a form.
• Secondary Buttons: Used for less prominent actions.
• Disabled Buttons: Indicate that an action is not available.
• Size Guidelines: Maintain a minimum width of 48px height for touch accessibility.

Button Variations

Type	Example	Description
Primary	<button class="btn btn-primary">Click Me</button>	Used for main actions
Secondary	<button class="btn btn-secondary">Click Me</button>	Used for secondary actions
Disabled	<button class="btn btn-primary" disabled>Disabled</button>	Disabled state
Outline	<button class="btn btn-outline">Outline</button>	A button with only a border

Code Snippets

Basic HTML

<button class="btn btn-primary">Click Me</button>

SCSS Styling

.btn-primary {
  background-color: var(--interactive-primary-brand-enabled);
  &:hover { background-color: var(--interactive-primary-brand-hovered); }
  &:focus { background-color: var(--interactive-primary-brand-focused); }
}

React Example

import React from 'react';

const Button = ({ label }) => (
  <button className="btn btn-primary">{label}</button>
);

export default Button;

Interactive Preview

An interactive button preview is coming soon! This will allow users to test different button states and configurations directly on this page.

Accessibility Considerations

To ensure buttons are accessible to all users:

• Contrast Ratio: Buttons should have a minimum contrast ratio of 4.5:1.
• Keyboard Navigation: Ensure buttons are focusable using the tab key.
• ARIA Labels: Use aria-label for buttons that only contain icons.

Example:

<button aria-label="Close" class="btn-icon">
  <svg>...</svg>
</button>

Figma & Resources

• Figma Button Components (Link to Figma)
• CSS Variables Reference (Documentation on using design tokens)

By following these guidelines, we ensure a consistent, accessible, and scalable button system for our design system.