Button Component

Axiom01's button component provides clear, semantic, and accessible calls to action. Buttons are designed to be intuitive and highly customizable through CSS variables, ensuring they fit seamlessly into any theme.

Default Buttons

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

Button Sizes

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

Buttons with Icons

<button class="button primary"><i class="fas fa-plus"></i> Add Item</button>
	<button class="button secondary"><i class="fas fa-save"></i> Save</button>
	<button class="button"><i class="fas fa-trash"></i> Delete</button>

Disabled Buttons

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

Link Buttons

Use <a> tags with .button class for navigation.

Learn More View Details

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