Forms Buttons

Buttons

A full-featured button system built on the wf-btn base class. Combine style modifiers ( outlined , plain ), semantic and extended color variants, size modifiers, icon layouts, pill and block shapes, and group containers — all on any <button> or <a> element.

Basic

The default button uses wf-btn alone. Add wf-btn-outlined for a transparent fill with a visible border, wf-btn-plain for a borderless transparent style, or wf-btn-link for a text-only inline appearance. All variants work on <button> and <a> elements. When a button contains a <span> , padding tightens automatically to accommodate the icon alignment.

Link
Learn more
HTML 
<button class="wf-btn" type="button">Default</button>
<button class="wf-btn wf-btn-outlined" type="button">Outlined</button>
<button class="wf-btn wf-btn-plain" type="button">Plain</button>
<a class="wf-btn wf-btn-link" href="/path">Link</a>

<!-- Wrap text in <span> alongside an icon for tighter padding -->
<button class="wf-btn wf-btn-primary" type="button">
  <i class="icon plus" aria-hidden="true"></i>
  <span>New item</span>
</button>

Colors

Six semantic colors fill the map to framework intent — primary (brand), secondary, positive (success), negative (danger), alert (warning), and info. Each color supports all three surface modifiers: solid fill (default), outlined , and plain .

Solid fill

Outlined

Plain

HTML 
<!-- Solid fill -->
<button class="wf-btn wf-btn-primary" type="button">Primary</button>
<button class="wf-btn wf-btn-secondary" type="button">Secondary</button>
<button class="wf-btn wf-btn-positive" type="button">Positive</button>
<button class="wf-btn wf-btn-negative" type="button">Negative</button>
<button class="wf-btn wf-btn-alert" type="button">Alert</button>
<button class="wf-btn wf-btn-info" type="button">Info</button>

<!-- Outlined (transparent fill, colored border + text) -->
<button class="wf-btn wf-btn-primary wf-btn-outlined" type="button">Primary</button>

<!-- Plain (no border, colored text) -->
<button class="wf-btn wf-btn-primary wf-btn-plain" type="button">Primary</button>

Color Palette

Nine extended palette colors for branded UI — sage , indigo , earth , forest , plum , lavender , dusk , light , and dark . Every color also has a -inverted variant that uses a muted tinted background with a matching text color — ideal for tags, badges, and secondary actions. Use wf-btn-transparent for buttons placed on dark or image hero sections.

Extended palette — solid fill

Inverted — semantic colors

Inverted — extended palette

Transparent — for dark/hero backgrounds

HTML 
<!-- Extended palette -->
<button class="wf-btn wf-btn-sage" type="button">Sage</button>
<button class="wf-btn wf-btn-indigo" type="button">Indigo</button>
<button class="wf-btn wf-btn-earth" type="button">Earth</button>
<button class="wf-btn wf-btn-forest" type="button">Forest</button>
<button class="wf-btn wf-btn-plum" type="button">Plum</button>
<button class="wf-btn wf-btn-lavender" type="button">Lavender</button>
<button class="wf-btn wf-btn-dusk" type="button">Dusk</button>
<button class="wf-btn wf-btn-light" type="button">Light</button>
<button class="wf-btn wf-btn-dark" type="button">Dark</button>

<!-- Inverted variants -->
<button class="wf-btn wf-btn-primary-inverted" type="button">Primary</button>
<button class="wf-btn wf-btn-positive-inverted" type="button">Positive</button>

<!-- For dark/hero backgrounds -->
<button class="wf-btn wf-btn-transparent" type="button">Transparent</button>
<button class="wf-btn wf-btn-inverted" type="button">Inverted</button>

Sizes

Four size modifiers scale padding and font size. The default button (no modifier) sits between sm and md . All size modifiers also apply to wf-btn-icon buttons.

Icon button sizes

HTML 
<button class="wf-btn wf-btn-xs" type="button">Extra Small</button>
<button class="wf-btn wf-btn-sm" type="button">Small</button>
<button class="wf-btn" type="button">Default</button>
<button class="wf-btn wf-btn-md" type="button">Medium</button>
<button class="wf-btn wf-btn-lg" type="button">Large</button>

<!-- Same size modifiers on icon buttons -->
<button class="wf-btn wf-btn-icon wf-btn-sm" type="button" aria-label="Settings">
  <i class="icon gear" aria-hidden="true"></i>
</button>

Icon & Labeled

Use wf-btn-icon for square icon-only buttons — the class replaces the asymmetric text padding with equal padding on all sides. Use wf-btn-labeled for icon-strip buttons where the icon is visually separated from the text by a darker inset area and a thin divider line. Place the icon as the first or last child of the button.

Icon-only

Labeled (icon strip on the left)

Labeled (icon strip on the right)

HTML 
<!-- Icon-only: always add aria-label for accessibility -->
<button class="wf-btn wf-btn-icon wf-btn-primary" type="button" aria-label="Add item">
  <i class="icon plus" aria-hidden="true"></i>
</button>

<!-- Labeled: icon as first child (strip on left) -->
<button class="wf-btn wf-btn-labeled wf-btn-primary" type="button">
  <i class="icon upload" aria-hidden="true"></i>
  <span>Upload file</span>
</button>

<!-- Labeled: icon as last child (strip on right) -->
<button class="wf-btn wf-btn-labeled wf-btn-primary" type="button">
  <span>Next step</span>
  <i class="icon arrow right" aria-hidden="true"></i>
</button>

Shapes & Groups

Add wf-btn-pill for a fully rounded shape or wf-btn-block for a full-width button. Wrap multiple buttons in wf-btn-group (horizontal) or wf-btn-group-vertical to collapse gaps and share a continuous border — only the outer ends are rounded. Add wf-btn-pill to the group container to apply a pill shape to the whole group.

Pill

Block

Horizontal group

Vertical group

HTML 
<!-- Pill -->
<button class="wf-btn wf-btn-primary wf-btn-pill" type="button">Pill</button>

<!-- Block -->
<button class="wf-btn wf-btn-primary wf-btn-block" type="button">Block</button>

<!-- Horizontal group -->
<div class="wf-btn-group">
  <button class="wf-btn" type="button">Left</button>
  <button class="wf-btn" type="button">Center</button>
  <button class="wf-btn" type="button">Right</button>
</div>

<!-- Pill-shaped horizontal group -->
<div class="wf-btn-group wf-btn-pill">
  <button class="wf-btn wf-btn-primary" type="button">Day</button>
  <button class="wf-btn wf-btn-primary wf-btn-outlined" type="button">Week</button>
  <button class="wf-btn wf-btn-primary wf-btn-outlined" type="button">Month</button>
</div>

<!-- Vertical group -->
<div class="wf-btn-group-vertical">
  <button class="wf-btn" type="button">Top</button>
  <button class="wf-btn" type="button">Middle</button>
  <button class="wf-btn" type="button">Bottom</button>
</div>

States

The native disabled attribute reduces opacity and removes pointer events across all variants. JS components apply a loading spinner overlay automatically — wf-ajax-action.js and wf-master-form.js add wf-loading to the trigger button; wf-ajax-form.js adds wf-button-loading to the Submit button.

Disabled

Loading (class applied by JS)

HTML 
<!-- Disabled: native HTML attribute -->
<button class="wf-btn wf-btn-primary" type="button" disabled>Save</button>

<!-- Loading: added by JS components automatically -->
<!-- wf-ajax-action.js / wf-master-form.js -->
<button class="wf-btn wf-btn-primary wf-loading" type="button">Saving…</button>

<!-- wf-ajax-form.js (submit button inside a data-wf-ajax-form form) -->
<button class="wf-btn wf-btn-primary wf-button-loading" type="submit">Send</button>

Class Reference

All modifier classes available on .wf-btn

Class Description
wf-btn Required base class. Apply to <button> or <a> .
wf-btn-{outlined,plain,link} Surface modifier. outlined — transparent fill, visible border. plain — transparent fill, no border. link — no background, no border, zero inline padding.
wf-btn-{xs,sm,md,lg} Size modifier. Default (no modifier) sits between sm and md .
wf-btn-icon Removes asymmetric padding so icon-only buttons are square.
wf-btn-labeled Icon-strip plus text layout. The icon gets a darker inset and a dividing border; wrap the label in <span> .
wf-btn-pill Fully rounded border radius ( 999rem ).
wf-btn-block Full-width button ( width: 100% ).
wf-btn-group Horizontal button group — collapses gaps, rounds only outer ends.
wf-btn-group-vertical Vertical button group — same border logic on the block axis.
wf-btn-{primary,secondary,positive,negative,alert,info} Semantic color fill. Combine with wf-btn-outlined or wf-btn-plain for surface variants.
Show More