Button

The primary call to action — seven hierarchies from solid brand to plain link, four sizes, optional leading/trailing icon, and a branch variant for branded dark surfaces.

Examples

Hierarchy

Seven levels of emphasis: the solid primary (default), button_secondary and button_secondary-dark (outlined), button_tertiary and button_tertiary-dark (ghost), button_link and button_link-dark (inline text). "dark" variants are neutral instead of brand-red.

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
  <button type="button" class="kompan-button kompan-button_sm"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg>Primary</button>
  <button type="button" class="kompan-button kompan-button_sm kompan-button_secondary"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg>Secondary</button>
  <button type="button" class="kompan-button kompan-button_sm kompan-button_secondary-dark"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg>Secondary dark</button>
  <button type="button" class="kompan-button kompan-button_sm kompan-button_tertiary"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg>Tertiary</button>
  <button type="button" class="kompan-button kompan-button_sm kompan-button_tertiary-dark"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg>Tertiary dark</button>
  <button type="button" class="kompan-button kompan-button_sm kompan-button_link"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg>Link</button>
  <button type="button" class="kompan-button kompan-button_sm kompan-button_link-dark"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg>Link dark</button>
</div>

Sizes

button_xs (28px, default), button_sm (36px), button_md (48px) and button_lg (56px). Icon and type scale with the size.

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
  <button type="button" class="kompan-button kompan-button_xs">Extra small<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg></button>
  <button type="button" class="kompan-button kompan-button_sm">Small<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg></button>
  <button type="button" class="kompan-button kompan-button_md">Medium<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg></button>
  <button type="button" class="kompan-button kompan-button_lg">Large<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg></button>
</div>

Icons

Drop an svg.button__icon before or after the label — or both. Icons inherit the text colour and the size ramp.

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
  <button type="button" class="kompan-button kompan-button_md kompan-button_secondary"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg>Leading</button>
  <button type="button" class="kompan-button kompan-button_md kompan-button_secondary">Trailing<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg></button>
  <button type="button" class="kompan-button kompan-button_md kompan-button_secondary"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg>Both<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg></button>
  <button type="button" class="kompan-button kompan-button_md kompan-button_secondary">No icon</button>
</div>

Icon only

button_icon-only pads equally on every side so the button is square. Always add an aria-label.

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
  <button type="button" class="kompan-button kompan-button_xs kompan-button_icon-only" aria-label="Settings"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg></button>
  <button type="button" class="kompan-button kompan-button_sm kompan-button_icon-only kompan-button_secondary" aria-label="Settings"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg></button>
  <button type="button" class="kompan-button kompan-button_md kompan-button_icon-only kompan-button_secondary-dark" aria-label="Settings"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg></button>
  <button type="button" class="kompan-button kompan-button_lg kompan-button_icon-only kompan-button_tertiary" aria-label="Settings"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg></button>
</div>

States

Hover, focus and disabled come from the element states — no extra classes. Disabled primary swaps to the disabled tokens; the other hierarchies fade to 50%. Tab through the row to see the focus ring.

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
  <button type="button" class="kompan-button kompan-button_sm">Enabled</button>
  <button type="button" class="kompan-button kompan-button_sm" disabled>Disabled</button>
  <button type="button" class="kompan-button kompan-button_sm kompan-button_secondary" disabled>Disabled</button>
  <button type="button" class="kompan-button kompan-button_sm kompan-button_secondary-dark" disabled>Disabled</button>
  <button type="button" class="kompan-button kompan-button_sm kompan-button_tertiary" disabled>Disabled</button>
  <button type="button" class="kompan-button kompan-button_sm kompan-button_link" disabled>Disabled</button>
</div>

On a branch surface

Add button_branch when the button sits on a branded (dark) section: primary inverts to white-on-surface, the other hierarchies switch to the light branch palette.

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:1.5rem;border-radius:var(--radius-md);background:var(--color-branch-bg-primary)">
  <button type="button" class="kompan-button kompan-button_sm kompan-button_branch"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg>Primary</button>
  <button type="button" class="kompan-button kompan-button_sm kompan-button_branch kompan-button_secondary"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg>Secondary</button>
  <button type="button" class="kompan-button kompan-button_sm kompan-button_branch kompan-button_secondary-dark"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg>Secondary dark</button>
  <button type="button" class="kompan-button kompan-button_sm kompan-button_branch kompan-button_tertiary"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg>Tertiary</button>
  <button type="button" class="kompan-button kompan-button_sm kompan-button_branch kompan-button_tertiary-dark"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg>Tertiary dark</button>
  <button type="button" class="kompan-button kompan-button_sm kompan-button_branch kompan-button_link"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg>Link</button>
  <button type="button" class="kompan-button kompan-button_sm kompan-button_branch kompan-button_link-dark"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg>Link dark</button>
</div>

As a link

The same classes work on an <a> when the action navigates. Keep <button> for actions that stay on the page.

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
  <a href="#" class="kompan-button kompan-button_sm">Go to playgrounds<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg></a>
  <a href="#" class="kompan-button kompan-button_sm kompan-button_link">Read the story<svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg></a>
</div>

Accessibility

Use the right element

Use <button type="button"> for actions and <a href> for navigation — the classes work on both. Never put the classes on a <div>; it would have no keyboard or screen-reader semantics.

Icon-only buttons need a name

button_icon-only shows no text, so give the button an aria-label (or a visually-hidden sr-only label). Decorative icons next to a text label should be aria-hidden="true".

Disabled

The disabled attribute removes the button from the tab order, which is right for form submits. If the button must stay discoverable (e.g. explain why it is unavailable), use aria-disabled="true" instead — the styles cover both.

Focus is visible

Keyboard focus shows a 4px brand ring on a 2px surface-coloured gap (the Figma focus-ring token). Do not remove it with outline:none on the page.

Target size

button_xs is 28px tall and button_sm 36px — below the 44×44 touch-target guideline. Prefer button_md or larger for primary touch actions, or leave clear space around the small sizes.

Contrast

Primary white-on-brand-red and the secondary/tertiary red-600-on-white pass AA at 12–16px semibold. The "dark" hierarchies use 70% black; on tinted backgrounds re-check the ratio.

Stylesheet

Shipped as @wah-kompan/kompan-ui/components/button.css. Every value is a token reference, so it themes with the rest of the system rather than being restyled.

css
.kompan-button {
  /* Size ramp — xs is the Figma default */
  --kompan-button-py: var(--spacing-sm);
  --kompan-button-px: var(--spacing-sm);
  --kompan-button-gap: var(--spacing-xs);
  --kompan-button-icon: var(--width-icon-sm);
  --kompan-button-font-size: var(--type-font-size-xs);
  /* Colour roles — primary-brand is the Figma default */
  --kompan-button-bg: var(--color-button-primary-bg);
  --kompan-button-fg: var(--color-button-primary-fg);
  --kompan-button-border: transparent;
  --kompan-button-bg-hover: var(--color-button-primary-bg-hover);
  --kompan-button-fg-hover: var(--color-button-primary-fg-hover);
  --kompan-button-border-hover: transparent;
  --kompan-button-shadow:
    0 1px 2px 0 var(--color-utility-alpha-black-5),
    inset 0 -2px 0 0 var(--color-utility-alpha-black-5),
    inset 0 0 0 1px var(--color-utility-alpha-black-20);
  --kompan-button-focus-ring:
    0 0 0 2px var(--color-bg-primary),
    0 0 0 4px var(--color-button-focus-ring);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--kompan-button-gap) + var(--spacing-xxs));
  padding: var(--kompan-button-py) calc(var(--kompan-button-px) + var(--spacing-xxs));
  border: 0;
  border-radius: var(--radius-button-md);
  background: var(--kompan-button-bg);
  box-shadow: inset 0 0 0 var(--stroke-sm) var(--kompan-button-border), var(--kompan-button-shadow);
  color: var(--kompan-button-fg);
  font-family: var(--type-font-family-body);
  font-size: var(--kompan-button-font-size);
  font-weight: var(--type-font-weight-semibold);
  line-height: var(--kompan-button-icon);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.kompan-button:hover {
  background: var(--kompan-button-bg-hover);
  color: var(--kompan-button-fg-hover);
  box-shadow: inset 0 0 0 var(--stroke-sm) var(--kompan-button-border-hover), var(--kompan-button-shadow);
}
.kompan-button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 var(--stroke-sm) var(--kompan-button-border), var(--kompan-button-shadow), var(--kompan-button-focus-ring);
}
.kompan-button:disabled,
.kompan-button[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
}

/* Sizes */
.kompan-button_xs { --kompan-button-py: var(--spacing-sm); --kompan-button-px: var(--spacing-sm);  --kompan-button-gap: var(--spacing-xs); --kompan-button-icon: var(--width-icon-sm); --kompan-button-font-size: var(--type-font-size-xs); }
.kompan-button_sm { --kompan-button-py: var(--spacing-md); --kompan-button-px: var(--spacing-lg);  --kompan-button-gap: var(--spacing-xs); --kompan-button-icon: var(--width-icon-md); --kompan-button-font-size: var(--type-font-size-sm); }
.kompan-button_md { --kompan-button-py: var(--spacing-lg); --kompan-button-px: var(--spacing-xl);  --kompan-button-gap: var(--spacing-xs); --kompan-button-icon: var(--width-icon-lg); --kompan-button-font-size: var(--type-font-size-md); }
.kompan-button_lg { --kompan-button-py: var(--spacing-xl); --kompan-button-px: var(--spacing-2xl); --kompan-button-gap: var(--spacing-sm); --kompan-button-icon: var(--width-icon-lg); --kompan-button-font-size: var(--type-font-size-md); }

/* Icon slot — pulled 2px outward so the icon sits at the true padding edge */
.kompan-button__icon {
  flex-shrink: 0;
  width: var(--kompan-button-icon);
  height: var(--kompan-button-icon);
}
.kompan-button__icon:first-child { margin-left: calc(-1 * var(--spacing-xxs)); }
.kompan-button__icon:last-child  { margin-right: calc(-1 * var(--spacing-xxs)); }
.kompan-button_icon-only { padding: var(--kompan-button-py); gap: 0; }
.kompan-button_icon-only .kompan-button__icon { margin: 0; }

/* Hierarchies */
.kompan-button_secondary {
  --kompan-button-bg: var(--color-button-secondary-brand-bg);
  --kompan-button-fg: var(--color-button-secondary-brand-fg);
  --kompan-button-border: var(--color-button-secondary-brand-border);
  --kompan-button-bg-hover: var(--color-button-secondary-brand-bg-hover);
  --kompan-button-fg-hover: var(--color-button-secondary-brand-fg-hover);
  --kompan-button-border-hover: var(--color-button-secondary-brand-border-hover);
  --kompan-button-shadow: 0 0 transparent;
}
.kompan-button_secondary-dark {
  --kompan-button-bg: var(--color-button-secondary-subtle-bg);
  --kompan-button-fg: var(--color-button-secondary-subtle-fg);
  --kompan-button-border: var(--color-button-secondary-subtle-border);
  --kompan-button-bg-hover: var(--color-button-secondary-subtle-bg-hover);
  --kompan-button-fg-hover: var(--color-button-secondary-subtle-fg-hover);
  --kompan-button-border-hover: var(--color-button-secondary-subtle-border-hover);
  --kompan-button-shadow: 0 0 transparent;
}
.kompan-button_tertiary {
  --kompan-button-bg: transparent;
  --kompan-button-fg: var(--color-button-secondary-brand-fg);
  --kompan-button-bg-hover: var(--color-button-secondary-brand-bg-hover);
  --kompan-button-fg-hover: var(--color-button-secondary-brand-fg-hover);
  --kompan-button-shadow: 0 0 transparent;
}
.kompan-button_tertiary-dark {
  --kompan-button-bg: transparent;
  --kompan-button-fg: var(--color-button-secondary-subtle-fg);
  --kompan-button-bg-hover: var(--color-button-secondary-subtle-bg-hover);
  --kompan-button-fg-hover: var(--color-button-secondary-subtle-fg-hover);
  --kompan-button-shadow: 0 0 transparent;
}
.kompan-button_link,
.kompan-button_link-dark {
  --kompan-button-bg: transparent;
  --kompan-button-bg-hover: transparent;
  --kompan-button-shadow: 0 0 transparent;
  padding: 0;
  gap: var(--spacing-sm);
  border-radius: 0;
}
.kompan-button_link .kompan-button__icon,
.kompan-button_link-dark .kompan-button__icon { margin: 0; }
.kompan-button_link {
  --kompan-button-fg: var(--color-button-secondary-brand-fg);
  --kompan-button-fg-hover: var(--color-button-secondary-brand-fg-hover);
}
.kompan-button_link-dark {
  --kompan-button-fg: var(--color-button-secondary-subtle-fg);
  --kompan-button-fg-hover: var(--color-button-secondary-subtle-fg-hover);
}

/* Disabled — primary swaps tokens, every other hierarchy fades to 50% */
.kompan-button:disabled,
.kompan-button[aria-disabled="true"] {
  --kompan-button-bg: var(--color-button-primary-bg-disabled);
  --kompan-button-fg: var(--color-button-primary-fg-disabled);
  --kompan-button-shadow: 0 1px 2px 0 var(--color-utility-alpha-black-5);
}
.kompan-button:disabled:not(.kompan-button_secondary):not(.kompan-button_secondary-dark):not(.kompan-button_tertiary):not(.kompan-button_tertiary-dark):not(.kompan-button_link):not(.kompan-button_link-dark) { opacity: 1; }
.kompan-button_secondary:disabled, .kompan-button_secondary-dark:disabled,
.kompan-button_tertiary:disabled,  .kompan-button_tertiary-dark:disabled,
.kompan-button_link:disabled,      .kompan-button_link-dark:disabled,
.kompan-button_secondary[aria-disabled="true"], .kompan-button_secondary-dark[aria-disabled="true"],
.kompan-button_tertiary[aria-disabled="true"],  .kompan-button_tertiary-dark[aria-disabled="true"],
.kompan-button_link[aria-disabled="true"],      .kompan-button_link-dark[aria-disabled="true"] {
  --kompan-button-bg: var(--kompan-button-bg-hover, transparent);
  opacity: 0.5;
}
.kompan-button_secondary:disabled, .kompan-button_secondary[aria-disabled="true"] { --kompan-button-bg: var(--color-button-secondary-brand-bg); --kompan-button-fg: var(--color-button-secondary-brand-fg); --kompan-button-shadow: 0 0 transparent; }
.kompan-button_secondary-dark:disabled, .kompan-button_secondary-dark[aria-disabled="true"] { --kompan-button-bg: var(--color-button-secondary-subtle-bg); --kompan-button-fg: var(--color-button-secondary-subtle-fg); --kompan-button-shadow: 0 0 transparent; }
.kompan-button_tertiary:disabled, .kompan-button_link:disabled, .kompan-button_tertiary[aria-disabled="true"], .kompan-button_link[aria-disabled="true"] { --kompan-button-bg: transparent; --kompan-button-fg: var(--color-button-secondary-brand-fg); --kompan-button-shadow: 0 0 transparent; }
.kompan-button_tertiary-dark:disabled, .kompan-button_link-dark:disabled, .kompan-button_tertiary-dark[aria-disabled="true"], .kompan-button_link-dark[aria-disabled="true"] { --kompan-button-bg: transparent; --kompan-button-fg: var(--color-button-secondary-subtle-fg); --kompan-button-shadow: 0 0 transparent; }

/* Branch — the same hierarchies on a branded dark surface (Figma Section=Branch) */
.kompan-button_branch {
  --kompan-button-bg: var(--color-branch-button-primary-bg);
  --kompan-button-fg: var(--color-branch-button-primary-fg);
  --kompan-button-bg-hover: var(--color-branch-button-primary-bg-hover);
  --kompan-button-fg-hover: var(--color-branch-button-primary-fg-hover);
}
.kompan-button_branch.kompan-button_secondary {
  --kompan-button-bg: var(--color-branch-button-secondary-brand-bg);
  --kompan-button-fg: var(--color-branch-button-secondary-brand-fg-brand);
  --kompan-button-border: var(--color-branch-button-secondary-brand-border-brand);
  --kompan-button-bg-hover: var(--color-branch-button-secondary-brand-bg-hover);
  --kompan-button-fg-hover: var(--color-branch-button-secondary-brand-fg-hover);
  --kompan-button-border-hover: var(--color-branch-button-secondary-brand-border-hover);
}
.kompan-button_branch.kompan-button_secondary-dark {
  --kompan-button-bg: var(--color-branch-button-secondary-subtle-bg);
  --kompan-button-fg: var(--color-branch-button-secondary-subtle-fg-subtle);
  --kompan-button-border: var(--color-branch-button-secondary-subtle-border-subtle);
  --kompan-button-bg-hover: var(--color-branch-button-secondary-subtle-bg-hover);
  --kompan-button-fg-hover: var(--color-branch-button-secondary-subtle-fg-hover);
  --kompan-button-border-hover: var(--color-branch-button-secondary-subtle-border-hover);
}
.kompan-button_branch.kompan-button_tertiary,
.kompan-button_branch.kompan-button_link {
  --kompan-button-bg: transparent;
  --kompan-button-bg-hover: transparent;
  --kompan-button-fg: var(--color-branch-button-secondary-brand-fg-brand);
  --kompan-button-fg-hover: var(--color-branch-button-secondary-brand-fg-hover);
}
.kompan-button_branch.kompan-button_tertiary { --kompan-button-bg-hover: var(--color-branch-button-secondary-brand-bg-hover); }
.kompan-button_branch.kompan-button_tertiary-dark,
.kompan-button_branch.kompan-button_link-dark {
  --kompan-button-bg: transparent;
  --kompan-button-bg-hover: transparent;
  --kompan-button-fg: var(--color-branch-button-secondary-subtle-fg-subtle);
  --kompan-button-fg-hover: var(--color-branch-button-secondary-subtle-fg-hover);
}
.kompan-button_branch.kompan-button_tertiary-dark {
  --kompan-button-bg: var(--color-branch-button-secondary-subtle-bg);
  --kompan-button-bg-hover: var(--color-branch-button-secondary-subtle-bg-hover);
}
.kompan-button_branch:disabled:not([class*="kompan-button_secondary"]):not([class*="kompan-button_tertiary"]):not([class*="kompan-button_link"]),
.kompan-button_branch[aria-disabled="true"]:not([class*="kompan-button_secondary"]):not([class*="kompan-button_tertiary"]):not([class*="kompan-button_link"]) {
  --kompan-button-bg: var(--color-branch-button-primary-bg-disabled);
  --kompan-button-fg: var(--color-branch-button-primary-fg-disabled);
}