Button

Stable

Triggers an action or navigates to a destination. Works as a <button> element or an <a> tag — the class does the styling, the element provides the semantics.

Recent decision: the high-consequence variant is vi-btn--destructive (renamed from danger); primary/secondary now sit on the AA-tuned brand scale. See Decisions.

Variants

Primary

The main call-to-action. Use once per section maximum. Overuse dilutes its weight.

HTML

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

<!-- As a link -->
<a href="/page" class="vi-btn vi-btn--primary">Primary Button</a>

Secondary

Outlined style. Use alongside a Primary button for secondary actions, or alone when you need a prominent but non-dominant button.

HTML

<button class="vi-btn vi-btn--secondary">Secondary Button</button>

Ghost

Subtle, bordered. Best for tertiary actions like "Cancel" or "Dismiss" — actions the user might take but shouldn't be nudged toward.

HTML

<button class="vi-btn vi-btn--ghost">Ghost Button</button>

Destructive

Destructive actions only — delete, remove, revoke. Always pair with a confirmation step or ghost "Cancel" button.

HTML

<button class="vi-btn vi-btn--ghost">Cancel</button>
<button class="vi-btn vi-btn--destructive">Delete Record</button>

Sizes

Medium is the default — no size class needed. Add vi-btn--sm or vi-btn--lg only when context demands it.

HTML

<button class="vi-btn vi-btn--primary vi-btn--sm">Small</button>
<button class="vi-btn vi-btn--primary">Medium (default)</button>
<button class="vi-btn vi-btn--primary vi-btn--lg">Large</button>

States

HTML

<!-- Native disabled attribute -->
<button class="vi-btn vi-btn--primary" disabled>Disabled</button>

<!-- For <a> tags (no disabled attr) -->
<a class="vi-btn vi-btn--primary" aria-disabled="true">Disabled</a>

Modifiers

Full width

HTML

<button class="vi-btn vi-btn--primary vi-btn--full">Full Width Button</button>

Class reference

Class	Type	Description
vi-btn	Base	Required on every button. Applies layout, transition, and focus styles.
vi-btn--primary	Variant	Filled brand color. Primary call-to-action.
vi-btn--secondary	Variant	Outlined brand color. Secondary action.
vi-btn--ghost	Variant	Subtle border, neutral color. Tertiary / cancel action.
vi-btn--destructive	Variant	Red fill. Destructive actions only.
vi-btn--sm	Size	Compact. Use in tight spaces like table rows or card footers.
vi-btn--lg	Size	Large. Use in hero sections or prominent CTAs.
vi-btn--full	Modifier	Stretches to 100% of its container width.
vi-btn--icon	Modifier	Square aspect ratio for icon-only buttons.

Accessibility notes

Use the right element

Use <button> for actions (submit, delete, toggle). Use <a> for navigation. The class styles both identically — you choose the semantics.

Disabled link buttons

<a> elements don't support the disabled attribute. Use aria-disabled="true" and prevent click behavior with JS instead.