Skip to content
Español

Navigate

Español

Type to search. Press Escape to close.

    Components · css

    Button

    Use a <button> for actions and an <a> for navigation; both take the same classes. No JavaScript is involved.

    CSS: included in ivolt.css; standalone css/components/button.css (needs core.css).

    Every variant of the buttonfixtures/button/variants.htmlOpen alone — Every variant of the button
    <div class="iv-cluster">
  <button class="iv-button iv-button--primary" type="button">Primary</button>
  <button class="iv-button iv-button--secondary" type="button">Secondary</button>
  <button class="iv-button iv-button--ghost" type="button">Ghost</button>
  <button class="iv-button iv-button--danger" type="button">Danger</button>
  <button class="iv-button" type="button">Neutral</button>
  <a class="iv-button iv-button--secondary" href="#docs">Link as button</a>
</div>

    Variants

    Without a variant the button is neutral. --primary is for the main action of a view, --secondary outlines, --ghost is text-only, --danger marks destructive actions.

    Sizes and icon-only

    Default height is 2.5rem; --sm is 2rem and --lg 3rem. Icon-only buttons need aria-label and keep a square target of at least 24×24 px.

    Sizes and icon-onlyfixtures/button/sizes.htmlOpen alone — Sizes and icon-only
    <div class="iv-cluster">
  <button class="iv-button iv-button--primary iv-button--sm" type="button">Small</button>
  <button class="iv-button iv-button--primary" type="button">Default</button>
  <button class="iv-button iv-button--primary iv-button--lg" type="button">Large</button>
  <button class="iv-button iv-button--secondary iv-button--icon" type="button" aria-label="Search">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></svg>
  </button>
</div>

    States

    Use the native disabled attribute on buttons and aria-disabled="true" on links. aria-busy="true" shows a spinner, blocks pointer events and keeps the label. Hover styles only apply on devices with hover; the focus ring uses --iv-color-focus on :focus-visible.

    Disabled, busy and focusfixtures/button/states.htmlOpen alone — Disabled, busy and focus
    <div class="iv-cluster">
  <button class="iv-button iv-button--primary" type="button" disabled>Disabled</button>
  <a class="iv-button iv-button--secondary" href="#docs" aria-disabled="true">Disabled link</a>
  <button class="iv-button iv-button--primary" type="button" aria-busy="true">Saving…</button>
</div>

    Groups

    Buttons joined in a groupfixtures/button/group.htmlOpen alone — Buttons joined in a group
    <div class="iv-button-group" role="group" aria-label="View mode">
  <button class="iv-button iv-button--secondary" type="button" aria-pressed="true">List</button>
  <button class="iv-button iv-button--secondary" type="button" aria-pressed="false">Grid</button>
  <button class="iv-button iv-button--secondary" type="button" aria-pressed="false">Map</button>
</div>

    Customising

    .iv-button { --iv-button-radius: var(--iv-radius-full); }
.iv-button--primary { --iv-button-bg: var(--iv-color-accent); --iv-button-fg: var(--iv-color-on-accent); }

    Local properties: --iv-button-bg, --iv-button-fg, --iv-button-border, --iv-button-radius.

    Common mistakes

    • A <div> with the button class: not focusable, no keyboard activation.
    • Icon-only button without aria-label.
    • Several --primary buttons in one view; keep one main action.