Button Variants

Overview

<button class="primary">Primary Button</button>

<button class="secondary">Secondary Button</button>

<button class="danger">Delete</button>

<button class="success">Confirm</button>

<button class="primary" aria-label="Menu">
				<i class="axicon render" data-name="Menu"></i>
				</button>

<button class="small">Small</button>

<button class="button">Medium</button>

<button class="large">Large</button>

<button class="full-width">Full-Width</button>

<div class="grid tiles">
				<button>Option 1</button>
				<button>Option 2</button>
				<button>Option 3</button>
				</div>

Modifiers

• `.primary` - Primary action button.
• `.secondary` - Secondary action button.
• `.outline` - Transparent button with border.
• `.ghost` - Transparent button with no border.
• `.danger` - Destructive action button.
• `.success` - Positive action button.
• `.small` - Smaller padding and text size.
• `.large` - Larger padding and text size.
• `.icon-only` - Circular button for single icons.
• `.full-width` - Button spans 100% of its container width.

States

Hover State

All buttons have smooth hover effects (opacity change + lift with shadow).

Active State

Applied during click/press, removes the lift effect.

Focus State

Visible outline for keyboard navigation and accessibility.

Disabled State

Use the disabled attribute. Button becomes 50% opacity and is not clickable.

CSS Variables

Buttons use Axiom's color system variables:

/* Color variables */
				--a-color-primary           /* Primary button background */
				--a-color-on-primary        /* Primary button text */
				--a-color-secondary         /* Secondary button background */
				--a-color-on-secondary      /* Secondary button text */
				--a-color-error             /* Danger button background */
				--a-color-on-error          /* Danger button text */
				--a-color-success           /* Success button background */
				--a-color-on-success        /* Success button text */

Accessibility

• Semantic <button> elements
• Visible focus states
• Proper disabled state handling
• Icon buttons have aria-label
• High contrast in light and dark modes
• Touch-friendly minimum size (44x44px)

Best Practices

• Use semantically meaningful button text
• Provide aria-label for icon-only buttons
• Use danger buttons sparingly and clearly
• Avoid using too many colors in one interface
• Use appropriate button sizes for the context