### Button Variants

Core button styles for different semantic purposes and visual hierarchy.

#### Primary Button

Use for primary actions and calls-to-action. High visual prominence.

HTML

    <button class="button button--primary">Primary Action</button>
            <button class="button button--primary" disabled>Disabled</button>

#### Secondary Button

For secondary actions that complement the primary action.

HTML

    <button class="button button--secondary">Secondary</button>
            <button class="button button--secondary" disabled>Disabled</button>

#### Outline Button

Bordered button with transparent background for subtle emphasis.

HTML

    <button class="button button--outline">Outline</button>
            <button class="button button--outline" disabled>Disabled</button>

#### Ghost Button

Minimal button with no border, ideal for toolbars and navigation.

HTML

    <button class="button button--ghost">Ghost</button>
            <button class="button button--ghost" disabled>Disabled</button>

#### Link Button

Styled as a link but with button semantics.

HTML

    <button class="button button--link">Link Button</button>
            <button class="button button--link" disabled>Disabled</button>

#### Solid Button

Filled background with inverted text color.

HTML

    <button class="button button--solid">Solid</button>
            <button class="button button--solid" disabled>Disabled</button>

#### Accent Button

Uses the accent color for special emphasis.

HTML

    <button class="button button--accent">Accent</button>
            <button class="button button--accent" disabled>Disabled</button>

#### Clear Button

Transparent background with text color only.

HTML

    <button class="button button--clear">Clear</button>
            <button class="button button--clear" disabled>Disabled</button>

### Status Variants

Semantic status buttons for success, warning, danger, and info actions.

#### Success Button

Indicates positive or successful actions like save, confirm, or complete.

HTML

    <button class="button button--success">Success</button>
            <button class="button button--success" disabled>Disabled</button>

#### Warning Button

For actions that require caution or attention.

HTML

    <button class="button button--warning">Warning</button>
            <button class="button button--warning" disabled>Disabled</button>

#### Danger Button

For destructive or irreversible actions like delete or remove.

HTML

    <button class="button button--danger">Danger</button>
            <button class="button button--danger" disabled>Disabled</button>

#### Info Button

For informational actions or links to help content.

HTML

    <button class="button button--info">Info</button>
            <button class="button button--info" disabled>Disabled</button>

### Button Sizes

Five size options from extra-small to extra-large for different contexts.

#### Size Comparison

HTML

    <button class="button button--primary button--size-xs">
                Extra Small
            </button>
            <button class="button button--primary button--size-sm">Small</button>
            <button class="button button--primary button--size-md">Medium</button>
            <button class="button button--primary button--size-lg">Large</button>
            <button class="button button--primary button--size-xl">
                Extra Large
            </button>

#### Sizes with Icons

HTML

    <button class="button button--primary button--size-xs">
                <span>⚡</span>
                XS
            </button>
            <button class="button button--primary button--size-sm">
                <span>⚡</span>
                Small
            </button>
            <button class="button button--primary button--size-md">
                <span>⚡</span>
                Medium
            </button>
            <button class="button button--primary button--size-lg">
                <span>⚡</span>
                Large
            </button>
            <button class="button button--primary button--size-xl">
                <span>⚡</span>
                Extra Large
            </button>

### Button Shapes

Different border radius options for various design contexts.

#### Shape Variants

HTML

    <button class="button button--primary">Default</button>
            <button class="button button--primary button--rounded">Rounded</button>
            <button class="button button--primary button--pill">Pill Shape</button>
            <button class="button button--primary button--square">Square</button>

#### Icon Buttons

Square aspect ratio buttons for icon-only use cases.

HTML

    <button
                class="button button--primary button--icon"
                aria-label="Search"
            >
                🔍
            </button>
            <button
                class="button button--secondary button--icon"
                aria-label="Settings"
            >
                ⚙️
            </button>
            <button class="button button--outline button--icon" aria-label="Edit">
                ✏️
            </button>
            <button class="button button--ghost button--icon" aria-label="Close">
                ✕
            </button>

### Button States

Interactive states and special button behaviors.

#### Disabled State

Buttons can be disabled using the `disabled` attribute or `.button--disabled` class.

HTML

    <button class="button button--primary" disabled>
                Disabled (attr)
            </button>
            <button class="button button--primary button--disabled">
                Disabled (class)
            </button>

#### Loading State

Shows a spinner and makes the button non-interactive during async operations.

HTML

    <button class="button button--primary button--loading">Loading</button>
            <button class="button button--secondary button--loading">
                Processing
            </button>
            <button class="button button--accent button--loading">Saving</button>

#### Full Width / Block

Buttons that span the full width of their container.

HTML

    <button class="button button--primary button--block">
                Full Width Primary
            </button>
            <button class="button button--secondary button--block">
                Full Width Secondary
            </button>

### Buttons with Icons

Combine text and icons for enhanced visual communication.

#### Leading Icons

Icon appears before the text label.

HTML

    <button class="button button--primary">
                <span aria-hidden="true">🔍</span>
                <span>Search</span>
            </button>
            <button class="button button--secondary">
                <span aria-hidden="true">📁</span>
                <span>Open File</span>
            </button>
            <button class="button button--success">
                <span aria-hidden="true">✓</span>
                <span>Save</span>
            </button>

#### Trailing Icons

Icon appears after the text label.

HTML

    <button class="button button--primary">
                <span>Download</span>
                <span aria-hidden="true">⬇️</span>
            </button>
            <button class="button button--secondary">
                <span>Next</span>
                <span aria-hidden="true">→</span>
            </button>
            <button class="button button--outline">
                <span>External Link</span>
                <span aria-hidden="true">↗</span>
            </button>

#### Icon Only (with accessible label)

Use `aria-label` for accessibility when using icon-only buttons.

HTML

    <button
                class="button button--primary button--icon"
                aria-label="Add item"
            >
                +
            </button>
            <button class="button button--danger button--icon" aria-label="Delete">
                🗑️
            </button>
            <button
                class="button button--ghost button--icon"
                aria-label="More options"
            >
                ⋮
            </button>
            <button
                class="button button--outline button--icon"
                aria-label="Refresh"
            >
                🔄
            </button>

### Button Groups

Group related buttons together for segmented controls or toolbars.

#### Horizontal Group

HTML

    <div class="button_group">
                <button class="button button--primary">Left</button>
                <button class="button button--primary">Center</button>
                <button class="button button--primary">Right</button>
            </div>

#### Outline Group

HTML

    <div class="button_group">
                <button class="button button--outline">Option A</button>
                <button class="button button--outline">Option B</button>
                <button class="button button--outline">Option C</button>
            </div>

#### Vertical Group

HTML

    <div class="button_group--vertical">
                <button class="button button--secondary">First</button>
                <button class="button button--secondary">Second</button>
                <button class="button button--secondary">Third</button>
            </div>

#### Mixed Group (Actions)

HTML

    <div class="button_group">
                <button class="button button--success">Save</button>
                <button class="button button--secondary">Preview</button>
                <button class="button button--danger">Delete</button>
            </div>

### Switch / Toggle Buttons

Toggle switches for on/off states.

#### Rectangular Switch

HTML

    <label class="switch">
                <input type="checkbox" />
                <span class="slider"></span>
            </label>
            <label class="switch">
                <input type="checkbox" checked />
                <span class="slider"></span>
            </label>

#### Rounded Switch

HTML

    <label class="switch">
                <input type="checkbox" />
                <span class="slider round"></span>
            </label>
            <label class="switch">
                <input type="checkbox" checked />
                <span class="slider round"></span>
            </label>

#### Switch with Labels

Off On
HTML

    <div style="display: flex; align-items: center; gap: 12px">
                <span>Off</span>
                <label class="switch">
                    <input type="checkbox" />
                    <span class="slider round"></span>
                </label>
                <span>On</span>
            </div>

### Button-Styled Links

Apply button classes to anchor elements for navigation that looks like buttons.

#### Link as Button

Primary Link Secondary Link Outline Link
HTML

    <a href="#" class="button button--primary">Primary Link</a>
            <a href="#" class="button button--secondary">Secondary Link</a>
            <a href="#" class="button button--outline">Outline Link</a>

### Accessibility

Best practices for accessible button implementation.

#### ARIA Attributes

HTML

    <!-- Pressed state for toggle buttons -->
            <button class="button button--primary" aria-pressed="true">
                Toggle (On)
            </button>
            <button class="button button--outline" aria-pressed="false">
                Toggle (Off)
            </button>

            <!-- Busy state for loading -->
            <button
                class="button button--primary button--loading"
                aria-busy="true"
            >
                Loading...
            </button>

            <!-- Expanded state for dropdowns -->
            <button
                class="button button--secondary"
                aria-expanded="false"
                aria-haspopup="true"
            >
                Menu ▼
            </button>

#### Focus Visible

Tab through these buttons to see the focus indicator.

HTML

    <button class="button button--primary">Focusable 1</button>
            <button class="button button--secondary">Focusable 2</button>
            <button class="button button--outline">Focusable 3</button>

### Combining Classes

Mix and match variants, sizes, and shapes for customized buttons.

#### Size + Shape + Variant

HTML

    <button class="button button--primary button--size-lg button--pill">
                Large Pill Primary
            </button>
            <button class="button button--success button--size-sm button--rounded">
                Small Rounded Success
            </button>
            <button class="button button--danger button--size-xl button--square">
                XL Square Danger
            </button>

#### Full Width with Loading

HTML

    <button
                class="button button--primary button--block button--loading button--size-lg"
            >
                Submitting Form...
            </button>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!