Skip to main content
Version: 17+

Buttons

Buttons are rendered by the <igloo-button> / <igloo-button-list> tag helpers, which output an anchor with a base button class, a size class and a design button variant class:

<a class="button button-small variant-btn-60712a52…" href="/">Small</a>
<a class="button variant-btn-60712a52…" href="/">Default</a>
<a class="button button-big variant-btn-60712a52…" href="/">Big</a>
v13 → v17 change

Sizes are now button-small / button-big (single dash, no modifier for default). The old colour modifiers (button--theme-alt, button--dark, button--light, button--white, button--border, button--underline) are gone — a button's colours come from a design button variant instead.

Colour — design button variants​

You no longer pick a fixed colour class. Each Design defines one or more button styles (background, text, border, hover colours and border radius), and choosing one applies a variant-btn-{key} class. The colours are driven by CSS variables (see Theme & design variables):

.button {
  background-color: var(--variant-button-background-color);
  color: var(--variant-button-text-color);
  border-color: var(--variant-button-border-color);
  border-radius: var(--variant-button-border-radius, 4px);
}

In a block view you normally let the editor's choice flow through:

<igloo-button-list model="@content.Buttons" />

Size​

<a class="button button-small">Small</a>
<a class="button">Default</a>
<a class="button button-big">Big</a>

Full width​

<a class="button button-block">Full-width button</a>

Button group​

Wrap multiple buttons in button-wrap to space them; inside a text-center container they centre automatically.

<div class="button-wrap">
  <a class="button variant-btn-…">Primary</a>
  <a class="button variant-btn-…">Secondary</a>
</div>

Disabled​

The .button style also covers :disabled and a .disabled class (reduced opacity, not-allowed cursor).

<button class="button" disabled>Disabled</button>
<a class="button disabled">Disabled</a>