Z

Overview

The Button component is a fundamental interactive element used for user actions throughout the application. It supports multiple variants, sizes, icon integration, loading states, and follows WCAG 2.1 AA accessibility guidelines.

Key Features

  • 4 visual variants (primary, secondary, tertiary, ghost)
  • 3 sizes with proper touch targets (≥ 48x48px)
  • Icon support (leading, trailing, or both)
  • Loading state with spinner animation
  • Full-width option for mobile layouts
  • Keyboard accessible with focus indicators

Variants

Primary

High-emphasis actions, main CTAs. Use sparingly for the most important action on a page.

Secondary

Medium-emphasis actions, secondary CTAs. Use for important but not primary actions.

Tertiary

Low-emphasis actions with soft background. Use for less prominent actions.

Ghost

Minimal emphasis, transparent background. Use for tertiary actions or in tight spaces.

Sizes

All sizes maintain minimum touch target of 48x48px for accessibility.

With Icons

Leading Icon

Trailing Icon

Both Icons

Full Width

Use full-width buttons for mobile layouts or when the button should span its container.

Interactive States

Hover over buttons to see hover states. Click to see focus states. Tab through for keyboard navigation.

Default State

Disabled State

Loading State

Focus State (Tab to focus)

Props Reference

Prop Type Default Description
variant string 'primary' Visual style: 'primary', 'secondary', 'tertiary', 'ghost'
size string 'md' Button size: 'sm', 'md', 'lg'
type string 'button' HTML button type: 'button', 'submit', 'reset'
icon string null Leading icon name
iconRight string null Trailing icon name
disabled boolean false Disables button interaction
loading boolean false Shows loading spinner, disables interaction
fullWidth boolean false Makes button full width of container
ariaLabel string null Accessible label for screen readers
class string '' Additional CSS classes

Usage Examples

Basic Usage

<x-building-blocks.button>
    Click Me
</x-building-blocks.button>

With Variant and Size

<x-building-blocks.button variant="secondary" size="lg">
    Large Secondary Button
</x-building-blocks.button>

With Icons

<x-building-blocks.button icon="plus" iconRight="arrow-right">
    Add New Item
</x-building-blocks.button>

Loading State

<x-building-blocks.button loading ariaLabel="Saving changes">
    Save Changes
</x-building-blocks.button>

Form Submit Button

<x-building-blocks.button type="submit" fullWidth>
    Submit Form
</x-building-blocks.button>

Accessibility Guidelines

WCAG 2.1 AA Compliance

  • Touch Targets: All button sizes maintain minimum 48x48px touch target for mobile accessibility
  • Color Contrast: All variants meet WCAG AA contrast requirements (4.5:1 for text, 3:1 for UI components)
  • Keyboard Navigation: Fully keyboard accessible with visible focus indicators
  • Screen Readers: Proper ARIA labels and states (aria-label, aria-busy, aria-disabled)
  • Loading State: aria-busy="true" announces loading state to screen readers
  • Disabled State: Proper disabled attribute prevents interaction and announces state

Best Practices

Do

  • • Use primary buttons for main actions
  • • Limit to one primary button per section
  • • Use clear, action-oriented labels
  • • Provide loading states for async actions
  • • Use icons to enhance meaning
  • • Maintain consistent button hierarchy

Don't

  • • Use multiple primary buttons together
  • • Make buttons too small (< 48x48px)
  • • Use vague labels like "Click Here"
  • • Disable without explanation
  • • Overuse icons (clarity over decoration)
  • • Mix button styles inconsistently

Responsive Behavior

Buttons adapt to different screen sizes while maintaining accessibility and usability.

Mobile (< 768px)

Tablet & Desktop (≥ 768px)