Button Component

Philosophy: Semantic Actions

Axiom01 buttons use proper semantic HTML with single modifier classes. Use <button> for actions and <a> for navigation, styled with minimal classes like .primary or .large.

<button>Default Button</button>
<button class="primary">Primary Action</button>
<button class="secondary">Secondary</button>
<button class="success">Success Action</button>
<button class="warning">Warning</button>
<button class="error">Destructive</button>

Button Sizes

Use single modifier classes for different button sizes following Axiom's minimal class approach.

<button class="small">Small Button</button>
<button>Default Size</button>
<button class="large">Large Button</button>

Button States

Buttons automatically handle focus, hover, active, and disabled states with proper accessibility support.

<button class="primary">Normal State</button>
<button class="primary" disabled>Disabled State</button>
<button class="secondary" aria-pressed="true">Pressed State</button>

Buttons with Icons

Include icons to provide visual context. Always include aria-hidden="true" on decorative icons.

<button class="primary">
    <i class="fas fa-download" aria-hidden="true"></i>
    Download
</button>
<button class="secondary">
    <i class="fas fa-edit" aria-hidden="true"></i>
    Edit
</button>
<button class="error">
    <i class="fas fa-trash" aria-hidden="true"></i>
    Delete
</button>

Best Practices

Accessibility

Axiom buttons are designed with accessibility in mind:

• Keyboard Navigation: All buttons are focusable and operable via keyboard
• Screen Reader Support: Proper semantic HTML ensures compatibility
• Focus Indicators: Clear visual focus states for keyboard users
• Color Independence: Meaning conveyed through text, not just color