Button

Button is the core action component for forms, navigation triggers, toolbars, dialogs, hero sections, and interactive UI flows. The visual structure is driven entirely by CSS — no JavaScript runtime is required for standard buttons. Use the same .button base class on native <button> elements for actions and <a> elements for navigation.

Button is suited for primary actions, secondary actions, destructive confirmations, inline action links, icon-only controls, loading states, and connected button groups.

Getting Started

Apply .button to an interactive element and add a visual modifier such as .is-primary, .is-primary-outline, or .is-ghost. Use class in HTML examples and className in React examples.

<button class="button is-primary">
  Save changes
</button>

<a href="/docs" class="button is-primary-outline">
  View documentation
</a>

View documentation

Use <button> for actions and <a> for navigation. Button does not require a fa-component attribute.

Structure

The base structure is intentionally small: one root element receives .button, then optional modifiers define color, size, state, or grouping behavior.

Element	Class / Attribute	Purpose
Root	`button`	Base class for spacing, alignment, border, focus, active, and disabled behavior.
Semantic modifier	`is-primary` / `is-success` / `is-danger`	Sets the button tone for brand, positive, destructive, warning, or informational actions.
Outline modifier	`is-primary-outline`	Creates a bordered secondary action that fills on hover.
Ghost modifier	`is-ghost` / `is-primary-ghost`	Creates a low-emphasis transparent button.
Size modifier	`is-tiny` / `is-small` / `is-large` / `is-xlarge`	Adjusts padding and font size through button sizing tokens.
Icon modifier	`is-icon`	Creates a square icon-only button with equal width and height.
State modifier	`is-loading` / `is-loading-inline` / `is-disabled`	Controls loading and disabled visual states.
Group wrapper	`button-group`	Connects related buttons into a segmented control.

Solid Variants

Solid variants are high-emphasis buttons. Use them for actions that should clearly stand out.

Class	CSS Variable	Description
`is-primary`	`var(--primary)`	Main product, page, or brand action.
`is-success`	`var(--success)`	Positive, completed, or confirm action.
`is-danger`	`var(--danger)`	Destructive, critical, or high-risk action.
`is-warning`	`var(--warning)`	Caution or attention action.
`is-info`	`var(--info)`	Informational highlighted action.
`is-dark`	`var(--dark)`	Dark neutral action.
`is-light`	`var(--light)`	Light neutral action.

<button class="button is-primary">Primary</button>
<button class="button is-success">Success</button>
<button class="button is-danger">Danger</button>
<button class="button is-warning">Warning</button>
<button class="button is-info">Info</button>
<button class="button is-dark">Dark</button>
<button class="button is-light">Light</button>

Outline Variants

Outline variants are useful for secondary actions that still need a visible boundary.

Class	Behavior
`is-primary-outline`	Primary bordered button that fills on hover.
`is-success-outline`	Success bordered button that fills on hover.
`is-danger-outline`	Danger bordered button that fills on hover.
`is-warning-outline`	Warning bordered button that fills on hover.
`is-info-outline`	Info bordered button that fills on hover.
`is-dark-outline`	Dark neutral outline button.
`is-light-outline`	Light neutral outline button.

<button class="button is-primary-outline">Primary</button>
<button class="button is-success-outline">Success</button>
<button class="button is-danger-outline">Danger</button>
<button class="button is-warning-outline">Warning</button>
<button class="button is-info-outline">Info</button>
<button class="button is-dark-outline">Dark</button>
<button class="button is-light-outline">Light</button>

Ghost Variants

Ghost variants are low-emphasis buttons with transparent backgrounds. They are useful for toolbars, cards, and quiet secondary actions.

Class	Purpose
`is-ghost`	Neutral ghost action.
`is-primary-ghost`	Primary ghost action.
`is-success-ghost`	Success ghost action.
`is-danger-ghost`	Danger ghost action.
`is-warning-ghost`	Warning ghost action.
`is-info-ghost`	Info ghost action.

<button class="button is-ghost">Ghost</button>
<button class="button is-primary-ghost">Primary</button>
<button class="button is-success-ghost">Success</button>
<button class="button is-danger-ghost">Danger</button>
<button class="button is-warning-ghost">Warning</button>
<button class="button is-info-ghost">Info</button>

Ghost buttons do not apply the active press transform used by regular buttons.

Button Size

Button sizes adjust padding and font size through button tokens. The default button requires no size modifier.

Class	Size	Use case
`is-tiny`	Extra small	Dense interfaces and compact actions.
`is-small`	Small	Toolbars, filters, and compact forms.
`button`	Default	General UI actions.
`is-large`	Large	Hero sections and prominent actions.
`is-xlarge`	Extra large	Marketing sections and high-emphasis CTAs.

<button class="button is-primary is-tiny">Tiny</button>
<button class="button is-primary is-small">Small</button>
<button class="button is-primary">Default</button>
<button class="button is-primary is-large">Large</button>
<button class="button is-primary is-xlarge">Extra Large</button>

Icon as Button

Use .is-icon for square icon-only buttons. Icon buttons remove regular text padding and define equal width and height. Always provide an accessible label for icon-only buttons.

Class combination	Size
`button is-icon is-tiny`	`1.8rem × 1.8rem`
`button is-icon is-small`	`2.1rem × 2.1rem`
`button is-icon`	`2.75rem × 2.75rem`
`button is-icon is-large`	`3rem × 3rem`
`button is-icon is-xlarge`	`3.5rem × 3.5rem`

<button class="button is-primary is-icon" aria-label="Add item">
  +
</button>

<button class="button is-primary-outline is-icon" aria-label="Search">
  <span aria-hidden="true">⌕</span>
</button>

Buttons With Icon

Icons and SVGs inside .button are displayed as block-level, non-shrinking elements. Use spacing utilities such as .gap-2 when the button contains an icon and text.

<button class="button is-primary gap-2">
  <span aria-hidden="true">↓</span>
  <span>Download</span>
</button>

<button class="button is-primary-outline gap-2">
  <span aria-hidden="true">→</span>
  <span>Continue</span>
</button>

Loading State

Button supports two loading styles. Use .is-loading when the label should be visually replaced by a spinner and .is-loading-inline when the label should stay visible.

Class	Behavior	Best for
`is-loading`	Hides the button text and centers the spinner.	Full button loading state.
`is-loading-inline`	Adds an inline spinner without hiding content.	Buttons that should keep their label visible.

<button class="button is-primary is-loading">
  Saving
</button>

<button class="button is-primary is-loading-inline gap-2">
  Saving
</button>

Loading buttons disable pointer interactions.

Disabled State

Buttons can be disabled with the native disabled attribute, aria-disabled="true", or .is-disabled. Use the native disabled attribute whenever the element is a real <button>.

Pattern	Behavior
`disabled`	Native disabled button behavior.
`aria-disabled="true"`	Accessible disabled state for links or custom elements.
`is-disabled`	Visual disabled class.
`fieldset:disabled .button`	Buttons inside disabled fieldsets receive disabled styling.

<button class="button is-primary" disabled>
  Disabled
</button>

<a href="#" class="button is-primary-outline is-disabled" aria-disabled="true">
  Disabled link
</a>

Disabled link

Button Group

Use .button-group to visually connect related buttons. Grouped buttons share borders, remove duplicate border seams, and adjust border radius automatically.

Class	Purpose
`button-group`	Creates a connected horizontal button group.
`is-vertical`	Stacks grouped buttons vertically.
`is-pill`	Creates pill-shaped outer edges on a horizontal group.

<div class="button-group">
  <button class="button is-primary-outline">Left</button>
  <button class="button is-primary-outline">Center</button>
  <button class="button is-primary-outline">Right</button>
</div>

<div class="button-group is-vertical">
  <button class="button is-primary-outline">Top</button>
  <button class="button is-primary-outline">Middle</button>
  <button class="button is-primary-outline">Bottom</button>
</div>

<div class="button-group is-pill">
  <button class="button is-primary-outline">Day</button>
  <button class="button is-primary-outline">Week</button>
  <button class="button is-primary-outline">Month</button>
</div>

Common Patterns

Use these combinations for frequent interface layouts.

Primary Action Row

<div class="is-flex gap-2 flex-wrap">
  <button class="button is-primary">Save changes</button>
  <button class="button is-light">Cancel</button>
</div>

Destructive Confirmation

<div class="is-flex gap-2 flex-wrap">
  <button class="button is-danger">Delete</button>
  <button class="button is-danger-outline">Cancel</button>
</div>

Toolbar

<div class="is-flex align-items-center gap-2 flex-wrap">
  <button class="button is-light is-small">Filter</button>
  <button class="button is-light is-small">Sort</button>
  <button class="button is-primary is-small">Create</button>
</div>

Hero Actions

<div class="is-flex gap-2 flex-wrap">
  <a href="/docs" class="button is-primary is-large">Get Started</a>
  <a href="/docs/components" class="button is-primary-outline is-large">Components</a>
</div>

Get Started Components

Runtime Behavior

Button is a CSS-only component. No FrontAlign JavaScript helper, runtime scanner, or hook is required.

Feature	Runtime requirement
Solid, outline, and ghost buttons	No JavaScript required.
Sizes and icon buttons	No JavaScript required.
Loading and disabled visuals	No JavaScript required; toggle classes from your app logic when needed.
Button groups	No JavaScript required.

React Usage

Button does not require a React hook. Use regular JSX with FrontAlign classes.

export function ButtonExample() {
  return (
    <div className="is-flex gap-2 flex-wrap">
      <button className="button is-primary">
        Save changes
      </button>

      <button className="button is-primary-outline">
        Cancel
      </button>
    </div>
  );
}

For application-level setup, provider usage, and runtime-powered components, continue with the React Integration guide.

Accessibility

Use the correct element for the action and keep disabled states semantic.

Use <button> for actions.
Use <a> for navigation.
Use disabled for native disabled buttons.
Use aria-disabled="true" when disabling links or non-button elements.
Provide aria-label for icon-only buttons.
Avoid disabled links with active href behavior unless your application also prevents interaction.

<button class="button is-primary">
  Save changes
</button>

<a href="/docs" class="button is-primary-outline">
  Read documentation
</a>

<button class="button is-icon is-primary" aria-label="Search">
  <svg aria-hidden="true"></svg>
</button>

<button className="button is-primary">
  Save changes
</button>

<a href="/docs" className="button is-primary-outline">
  Read documentation
</a>

<button className="button is-icon is-primary" aria-label="Search">
  <svg aria-hidden="true" />
</button>

Read documentation

Class Reference

Class	Group	Description
`button`	Base	Base button structure and interaction styling.
`is-primary`	Solid	Primary brand action.
`is-success`	Solid	Positive action.
`is-danger`	Solid	Destructive action.
`is-warning`	Solid	Caution action.
`is-info`	Solid	Informational action.
`is-dark`	Solid	Dark neutral action.
`is-light`	Solid	Light neutral action.
`is-primary-outline`	Outline	Primary outline action.
`is-success-outline`	Outline	Success outline action.
`is-danger-outline`	Outline	Danger outline action.
`is-warning-outline`	Outline	Warning outline action.
`is-info-outline`	Outline	Info outline action.
`is-dark-outline`	Outline	Dark outline action.
`is-light-outline`	Outline	Light outline action.
`is-ghost`	Ghost	Neutral low-emphasis action.
`is-primary-ghost`	Ghost	Primary low-emphasis action.
`is-success-ghost`	Ghost	Success low-emphasis action.
`is-danger-ghost`	Ghost	Danger low-emphasis action.
`is-warning-ghost`	Ghost	Warning low-emphasis action.
`is-info-ghost`	Ghost	Info low-emphasis action.
`is-tiny`	Size	Extra-small button size.
`is-small`	Size	Small button size.
`is-large`	Size	Large button size.
`is-xlarge`	Size	Extra-large button size.
`is-icon`	Icon	Square icon-only button.
`is-loading`	State	Full loading spinner state.
`is-loading-inline`	State	Inline loading spinner state.
`is-disabled`	State	Visual disabled state.
`button-group`	Group	Connected segmented button group.
`is-vertical`	Group	Vertical button group modifier.
`is-pill`	Group	Pill-shaped horizontal group modifier.

Notes

Button is a CSS-only component.
No JavaScript runtime is required.
No React hook is required.
Use semantic elements for accessible behavior.
Use .is-loading for full loading state and .is-loading-inline for inline loading state.
Use .button-group for connected button controls.