Button Components

Comprehensive button library with variants, sizes, states, and interactive examples

6 VariantsAccessibleTypeScript Ready

Interactive Demo

Click the buttons below to see them in action

Clicks: 0

Button Variants

Primary

High-emphasis actions, main CTAs

Save, Submit, Create

Secondary

Medium-emphasis actions

Cancel, Back, Edit

Success

Positive actions and confirmations

Approve, Accept, Confirm

Danger

Destructive or high-risk actions

Delete, Remove, Cancel

Outline

Subtle actions, secondary options

View Details, Learn More

Ghost

Minimal styling for special contexts

Navigation, Tooltips

Button Sizes

text-sm

Default

text-lg

className="px-3 py-1.5 text-sm" | default | "px-8 py-4 text-lg"

Icon Buttons

Default position

Icon on right

Success variant

Danger variant

Loading States

Click to see loading animation (2 second delay)

Always loading state

Disabled States

Primary disabled

Secondary disabled

Outline disabled

Danger disabled

Button Groups & Layout

Horizontal Button Group

Action Patterns

Primary + Secondary

Danger + Secondary

Single Action

Toggle Components

Basic Toggles

Enable notifications

Dark mode

Toggle Variants

Success variant

Warning variant

Danger variant

Primary variant

Toggle with Icons

Theme toggle

Notification settings

Switch Components

Dynamic Switches with Descriptions

Email notificationsYou'll receive email updates about your account activity

Push notificationsPush notifications are disabled

Toggle Groups

View Options

Time Range

Code Examples

Basic Button Usage

import { PrimaryButton, SecondaryButton } from '~/components/ui';

function MyComponent() {
  return (
    <div className="space-x-4">
      <PrimaryButton onClick={() => console.log('Primary clicked')}>
        Save Changes
      </PrimaryButton>
      <SecondaryButton onClick={() => console.log('Secondary clicked')}>
        Cancel
      </SecondaryButton>
    </div>
  );
}

Import and use basic button components with click handlers

Icon Buttons

import { IconButton } from '~/components/ui';
import { FaRocket, FaDownload } from 'react-icons/fa';

function ActionButtons() {
  return (
    <div className="flex gap-2">
      <IconButton
        icon={<FaRocket />}
        onClick={handleLaunch}
        aria-label="Launch application"
      >
        Launch
      </IconButton>
      <IconButton
        icon={<FaDownload />}
        iconPosition="right"
        onClick={handleDownload}
      >
        Download
      </IconButton>
    </div>
  );
}

Buttons with icons for better visual communication and accessibility

Loading States

import { LoadingButton } from '~/components/ui';

function AsyncAction({ loading, onClick }) {
  return (
    <LoadingButton
      loading={loading}
      onClick={onClick}
      disabled={loading}
    >
      {loading ? 'Processing...' : 'Submit Form'}
    </LoadingButton>
  );
}

Handle asynchronous actions with loading states and disabled states

Best Practices

✅ Do's

Use Primary buttons for main actions only
Include descriptive text on buttons
Use loading states for async actions
Consider button size relative to importance

❌ Don'ts

Don't use multiple Primary buttons in one view
Avoid generic text like "Click here"
Don't disable buttons without explanation
Avoid buttons smaller than 44px for touch targets