Buttons

2.0.2

A set of highly customizable button styles, including variants for colors, outlines, sizes, and groups.

Installation

Full Bundle (via UNPKG)

<link rel="stylesheet" href="https://unpkg.com/axis-twelve@2.0.2/dist/axis-twelve.min.css">

Module Only (via UNPKG)

<link rel="stylesheet" href="https://unpkg.com/axis-twelve@2.0.2/dist/modules/axis-buttons.min.css">

Class Reference

.ax-btnBase

Base button class. Reset styles and sets basic layout.

.ax-btn--primaryModifier

Primary action button color.

.ax-btn--secondaryModifier

Secondary action button color.

.ax-btn--successModifier

Success/Positive action color.

.ax-btn--dangerModifier

Danger/Negative action color.

.ax-btn--warningModifier

Warning/Caution action color.

.ax-btn--infoModifier

Informational action color.

.ax-btn--outline-*Modifier

Outline version of any color variant.

.ax-btn--smModifier

Small button size.

.ax-btn--lgModifier

Large button size.

.ax-btn--blockModifier

Makes button span full width of parent.

.ax-btn--ghostModifier

Transparent background without border.

.ax-btn--iconModifier

Optimized padding for icon-only buttons.

Live Examples

Solid Buttons

Classic filled buttons.

Preview: Solid Buttons

Source Code

html

<button class="ax-btn ax-btn--primary">Primary</button>
<button class="ax-btn ax-btn--secondary">Secondary</button>

Button Groups

Combine buttons visually.

Preview: Button Groups

Source Code

html

<div class="ax-btn-group">
  <button class="ax-btn ax-btn--primary">Left</button>
  <button class="ax-btn ax-btn--primary">Middle</button>
  <button class="ax-btn ax-btn--primary">Right</button>
</div>

Customization

Variable	Default	Description
`--ax-color-primary`	#3b82f6	Primary brand color
`--ax-spacing-sm`	0.5rem	Small padding base

♿ Accessibility Guidelines

•Use <button> for actions and <a> for navigation
•Use aria-label for icon-only buttons
•Focus and disabled states handled automatically

Module Evolution

Version	Type	Description
v2.0.1	Internal	Refactored padding and margins to use logical properties.

← Previous

Layout

Forms