Buttons

A high-performance button component with multiple variants for marketing, dashboard, and utility actions. Built with accessibility and visual excellence in mind.

Marketing Variants

Conversion-Focused Buttons

High-impact buttons designed for landing pages and calls to action.

<Button variant="brand">Start Free Trial</Button>
<Button variant="outline-brand">Request Demo</Button>

Dashboard Variants

Action Buttons

Standard buttons used within the dashboard for primary, secondary, and destructive actions.

<Button variant="primary">Create Project</Button>
<Button variant="dashboard">Save Changes</Button>
<Button variant="dashboard-outline">Cancel</Button>
<Button variant="destructive">Delete Account</Button>

Ghost & Utility

Subtle buttons for less-prominent actions or navigation.

<Button variant="ghost">View Details</Button>
<Button variant="link">Terms of Service</Button>

Sizes & Icon Buttons

Component Sizing

Available in various sizes to fit different layout requirements.

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large Action</Button>
<Button size="icon"><Settings /></Button>

Revealing Dashboard Actions

Action Reveal Pattern

A common dashboard pattern for table views where secondary actions are revealed via a toggle. (Click the filter icon to see effect)

Click to reveal actions

Interactive States

Loading State

Disabled State

With Content