Buttons

Overview

Buttons are used to submit forms, confirm actions, and navigate between key views. Use one primary button per surface to clearly signal the main action, and avoid overwhelming users with too many competing calls to action.

When to use

• To start or complete a primary task on the page.
• To trigger modals, dialogs, or secondary workflows.
• To clearly show destructive actions (using danger styles).

When not to use

• For inline actions in text — use links instead.
• For navigation inside large menus — prefer nav links.

Examples

Button variants

Primary Button Secondary Button Accent Button Disabled BlueBerry

Code

HTML

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

CSS (tokens & utilities)

:root {
  --color-btn-primary-bg: var(--color-primary);
  --color-btn-primary-text: #ffffff;
  --radius-button: 4px;
  --space-inline-button: var(--space-4);
  --space-block-button: var(--space-2);
}

.btn {
  border-radius: var(--radius-button);
  padding: var(--space-block-button) var(--space-inline-button);
  font: var(--font-button);
}