Button

Buttons allow users to perform actions and make choices with a single tap or click. As key interactive elements, they help guide users through tasks and workflows. Well-designed buttons are clear, accessible, and visually distinct, ensuring users can easily identify and interact with them. Use buttons to highlight primary actions, trigger events, or navigate to other parts of your product.

Primary

<button class="btn btn-primary">Primary</button>

.btn-primary {
    background-color: var(--surface-action);
    color: var(--text-on-action);
    border: none;
    cursor: pointer;
    font-family: var(--font-label);
    font-size: var(--label-default-caps-font-size);
    text-transform: uppercase;
    border-radius: var(--spacing-4);
    height: 40px;
    min-width: 120px;
    padding: 8px 32px;
    transition: background-color 0.3s ease;
}

Secondary

<button class="btn btn-outline-primary">Outline</button>

.btn-primary {
    background-color: var(--surface-action);
    color: var(--text-on-action);
    border: none;
    cursor: pointer;
    font-family: var(--font-label);
    font-size: var(--label-default-caps-font-size);
    text-transform: uppercase;
    border-radius: var(--spacing-4);
    height: 40px;
    min-width: 120px;
    padding: 8px 32px;
    transition: background-color 0.3s ease;
}

Accessibility

All button variants meet WCAG AAA color contrast requirements to ensure legibility across light and dark backgrounds. Primary actions avoid red and green hues to support users with red-green color blindness, instead relying on high-contrast blue tones. Text is presented in all caps with medium font weight to enhance visibility and recognition, even in low-vision or grayscale contexts. Interactive states—including hover, focus, and disabled—are visually distinct and keyboard accessible.