Buttons
Five visual variants cover the full range of action emphasis — from the highest-impact CTA down to destructive actions. Each variant supports an optional leading icon, a dropdown trigger, and a disabled state. All appearance tokens are driven by the Buttons group in the theme editor; no Bootstrap default colors are used anywhere.
CSS custom properties
Defined on :root in css/_fonts.css from theme.buttons.* fields. Consumed by css/_buttons.css.
| CSS variable | Theme field | Used for |
|---|---|---|
--btn-font-size | buttons.font_size | Font size on all button variants and size modifiers |
--btn-font-weight | buttons.font_weight | Font weight on all button variants |
--btn-radius | buttons.border_radius | Border radius on all button variants |
--btn-padding-y | buttons.padding_y | Vertical padding on the base .btn class |
--btn-padding-x | buttons.padding_x | Horizontal padding on the base .btn class |
--btn-primary-bg | buttons.primary_bg | Primary button background; focus ring color for all buttons |
--btn-primary-text | buttons.primary_text | Primary button text and icon color; active dropdown item text |
--btn-primary-border | buttons.primary_border | Primary button border |
--btn-primary-hover-bg | buttons.primary_hover_bg | Primary button hover / active background |
--btn-secondary-bg | buttons.secondary_bg | Secondary button background |
--btn-secondary-text | buttons.secondary_text | Secondary button text and icon color |
--btn-secondary-border | buttons.secondary_border | Secondary button border |
--btn-secondary-hover-bg | buttons.secondary_hover_bg | Secondary button hover / active background |
--btn-outline-primary-color | buttons.outline_primary_color | Outline Primary border, text, and icon; dropdown item text |
--btn-outline-primary-hover-bg | buttons.outline_primary_hover_bg | Outline Primary hover / active background |
--btn-outline-primary-hover-text | buttons.outline_primary_hover_text | Outline Primary hover / active text and icon |
--btn-outline-secondary-border | buttons.outline_secondary_border | Outline Secondary border; focus ring |
--btn-outline-secondary-text | buttons.outline_secondary_text | Outline Secondary text |
--btn-outline-secondary-hover-bg | buttons.outline_secondary_hover_bg | Outline Secondary hover background |
--btn-danger-bg | buttons.danger_bg | Danger button background |
--btn-danger-text | buttons.danger_text | Danger button text and icon color |
--btn-danger-border | buttons.danger_border | Danger button border |
--btn-danger-hover-bg | buttons.danger_hover_bg | Danger button hover / active background |
Primary
The main call-to-action. Filled with --btn-primary-bg. Use for the single highest-priority action on a screen — submit, save, proceed.
| Class | Source file | Role |
|---|---|---|
btn | css/_buttons.css | Base — flex display, font, radius, padding, transition |
btn-primary | css/_buttons.css | Variant — background, border, text, hover, active, focus states |
button-large | css/_buttons.css | Size modifier — horizontal padding ×2 (padding_x * 2) |
button-medium | css/_buttons.css | Size modifier — default padding (padding_y / padding_x) |
btn-sm | css/_buttons.css | Size modifier — reduced padding (padding_y − 2 / padding_x − 8) |
disable-button | css/_buttons.css | State — 0.6 opacity, pointer-events none |
Primary — with icon
The icon inherits --btn-primary-text via .btn-primary svg { fill: var(--btn-primary-text); }.
Primary — disabled
The disable-button class, sets opacity: 0.6 and pointer-events: none. No HTML disabled attribute is used, so the element remains in the tab order.
Secondary
A dark filled button using --btn-secondary-bg. Use for secondary CTAs that need visual weight alongside a primary action without consuming the brand color.
| Class | Source file | Role |
|---|---|---|
btn | css/_buttons.css | Base — flex display, font, radius, padding, transition |
btn-secondary | css/_buttons.css | Variant — background, border, text, hover, active, focus states |
button-large / button-medium / btn-sm | css/_buttons.css | Size modifiers — same as Primary (see above) |
disable-button | css/_buttons.css | State — 0.6 opacity, pointer-events none |
Outline Primary
Transparent background with a --btn-outline-primary-color border and text. Fills with --btn-outline-primary-hover-bg on hover. Use for secondary actions placed alongside a primary button — e.g. "Cancel" next to "Save".
| Class | Source file | Role |
|---|---|---|
btn | css/_buttons.css | Base — flex display, font, radius, padding, transition |
btn-outline-primary | css/_buttons.css | Variant — transparent bg, colored border and text; filled on hover/active |
button-large / button-medium / btn-sm | css/_buttons.css | Size modifiers — same as Primary (see above) |
disable-button | css/_buttons.css | State — 0.6 opacity, pointer-events none |
Outline Primary — with icon
Icon fill inherits --btn-outline-primary-color at rest and switches to --btn-outline-primary-hover-text on hover via .btn-outline-primary:hover svg.
Outline Secondary
Neutral outline using --btn-outline-secondary-border with --btn-outline-secondary-text. Low visual weight — use for tertiary actions or on already-tinted backgrounds where a colored button would be too prominent.
| Class | Source file | Role |
|---|---|---|
btn | css/_buttons.css | Base — flex display, font, radius, padding, transition |
btn-outline-secondary | css/_buttons.css | Variant — transparent bg, neutral border and text; surface fill on hover |
button-large / button-medium / btn-sm | css/_buttons.css | Size modifiers — same as Primary (see above) |
disable-button | css/_buttons.css | State — 0.6 opacity, pointer-events none |
Danger
Destructive action variant using --btn-danger-bg. Reserve for actions that cannot be undone — deleting a record, revoking access, permanent archival. Always pair with a confirmation step before the action executes.
| Class | Source file | Role |
|---|---|---|
btn | css/_buttons.css | Base — flex display, font, radius, padding, transition |
btn-danger | css/_buttons.css | Variant — background, border, text, hover, active, focus states |
button-large / button-medium / btn-sm | css/_buttons.css | Size modifiers — same as Primary (see above) |
disable-button | css/_buttons.css | State — 0.6 opacity, pointer-events none |
Danger — disabled
A disabled danger button signals that a destructive action is unavailable in the current context without removing it from the UI. Combine btn-danger with disable-button.
Dropdown
Option to convert any button variant into a Bootstrap dropdown trigger. The button renders with the dropdown-toggle class; the menu items use .dropdown-item styled entirely from theme tokens — no Bootstrap default colors.
| Class | Source file | Role |
|---|---|---|
btn | css/_buttons.css | Base button styles |
btn-{variant} | css/_buttons.css | Variant color styles — any of the five variants above |
dropdown-toggle | Bootstrap | Adds the caret indicator and wires up Bootstrap's JS toggle behaviour |
dropdown-item | css/_buttons.css | Menu items — text color from --btn-outline-primary-color, hover from global_colors.hover_surface, active fill from --btn-primary-bg |
dropdown-menu.show li | css/_buttons.css | List item padding inside an open menu |