Button

Semantic button component for user actions. No root class needed — just use the <button> tag with an optional single modifier for style. Supports sizes, icons, disabled states, and link variants.

Default Buttons

<button>Default</button>
<button class="primary">Primary</button>
<button class="secondary">Secondary</button>
<button class="outline">Outline</button>
<button class="ghost">Ghost</button>

Sizes

<button class="primary small">Small</button>
<button class="primary">Base</button>
<button class="primary large">Large</button>

With Icons

<button class="primary">
  <span class="axicon render" data-name="Plus"></span> Add Item
</button>
<button class="secondary">
  <span class="axicon render" data-name="Save"></span> Save
</button>

Disabled State

<button class="primary" disabled>Disabled Primary</button>
<button class="secondary" disabled>Disabled Secondary</button>
<button disabled>Disabled Default</button>

Link Buttons

Use <a> with class="button" for navigation actions:

Learn More View Details Browse

<a href="#" class="button primary">Learn More</a>
<a href="#" class="button secondary">View Details</a>
<a href="#" class="button outline">Browse</a>

HTML Structure

Use native <button> for actions, <a> for navigation. One root class provides all styling. Add a single modifier for variant.

<!-- Action -->
<button class="primary">Submit Form</button>

<!-- Navigation -->
<a href="/signup" class="button primary">Get Started</a>

<!-- Icon + Text -->
<button class="primary">
  <span class="axicon render" data-name="Download"></span>
  Download
</button>

Variants

Class	Use
`primary`	Primary action — most prominent. One per view.
`secondary`	Supporting action — less prominent.
`outline`	Transparent background, coloured border and text.
`ghost`	No border, no background — coloured text only. Lowest visual weight.
(none)	Default neutral button.

Size Modifiers

Class	Use
`small`	Dense layouts, secondary actions in toolbars or tables.
(none)	Default — standard interactive size.
`large`	Hero CTAs, prominent primary actions.

Accessibility

Always use <button> for actions, <a> for navigation — never <div>
Icon-only buttons must include aria-label
Use the native disabled attribute — not a CSS-only approach
All buttons have visible :focus-visible rings
Minimum 44×44px touch target on mobile

Features

Semantic Structure - Built with native HTML5 elements for maximum reliability.
Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
Fully Responsive - Scales perfectly from mobile to desktop screens.
No JS Dependency - Core functionality relies on pure CSS for maximum performance.
Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Button component is designed for versatile implementation across modern web applications. Ideal scenarios include:

Dashboards & Admin Panels - Structured data presentation and interface control.
Content Management Systems - Organizing complex information hierarchies and media.
E-Commerce Platforms - Enhancing product discovery and user workflows.
Marketing Sites - Highlighting key product offerings cleanly and effectively.
SaaS Applications - Delivering native-feeling, responsive app experiences.