Button

The Button component is a versatile interactive element used for user actions, navigation, and form submissions. It supports multiple color variants, styles, sizes, and includes advanced features like ripple effects and loading states.

Overview

The Button component is designed to provide flexible, accessible buttons with:

• Multiple color variants for different contexts
• Various styles (solid, outlined, transparent, gradient)
• Different sizes and shapes
• Icon support and loading states
• Ripple animation effects
• Link and router integration
• Responsive design with dark mode support

Basic Usage

import { Button } from '@/components/atoms'

function MyComponent() {
  return (
    <Button className='btn-primary'>
      Click Me
    </Button>
  )
}

Props

Prop	Type	Default	Description
children	ReactNode	-	The content to display in the button
label	string	-	Alternative to children for simple text content
className	string	''	Additional CSS classes
disabled	boolean	false	Whether the button is disabled
ripple	boolean	false	Enable ripple animation on click
as	Component	-	Custom component to render (for router links)
to	string	-	Route path (when using as prop)
href	string	-	External link URL

Color Variants

The Button component supports 8 different color variants:

Primary (Blue)

<Button className='btn-primary'>Primary</Button>

Secondary (Indigo)

<Button className='btn-secondary'>Secondary</Button>

Success (Emerald)

<Button className='btn-success'>Success</Button>

Info (Sky)

<Button className='btn-info'>Info</Button>

Warning (Amber)

<Button className='btn-warning'>Warning</Button>

Danger (Rose)

<Button className='btn-danger'>Danger</Button>

Dark (Slate)

<Button className='btn-dark'>Dark</Button>

Light (Gray)

<Button className='btn-light'>Light</Button>

Styles

Default Style

The default style has a solid background color with white text.

<Button className='btn-primary'>Default primary button</Button>

Outlined Style

Add the outlined class for a bordered style with colored text.

<Button className='btn-primary outlined'>Outlined primary button</Button>

Transparent Style

Add the transparent class for a light background with colored text.

<Button className='btn-primary transparent'>Transparent primary button</Button>

Gradient Style

Use gradient classes for modern gradient backgrounds.

<Button className='btn-gradient-primary'>Gradient primary button</Button>

Shapes

Default Rounded

Default buttons have slightly rounded corners.

<Button className='btn-primary'>Default rounded</Button>

Pill Shape

Add the rounded-full class for a pill-shaped button.

<Button className='btn-primary rounded-full'>Pill shaped</Button>

Sizes

Large (Default)

Default size with standard padding.

<Button className='btn-primary'>Large</Button>

Medium

Add the btn-md class for medium size.

<Button className='btn-primary btn-md'>Medium</Button>

Small

Add the btn-sm class for small size.

<Button className='btn-primary btn-sm'>Small</Button>

Extra Small

Add the btn-xs class for extra small size.

<Button className='btn-primary btn-xs'>Extra Small</Button>

Icon Buttons

Icon Only

Add the btn-icon class for icon-only buttons.

<Button className='btn-primary btn-icon'>
  <NavIcon icon='lucide:home' />
</Button>

Icon with Text

Combine icons with text content.

<Button className='btn-primary'>
  <NavIcon icon='lucide:home' className='mr-2' />
  Home
</Button>

Loading States

Loading with Icon

Add the loading class and include a spinning icon.

<Button className='btn-primary loading btn-icon'>
  <NavIcon icon='lucide:loader-circle' className='animate-spin mr-2' />
  Loading...
</Button>

Disabled States

Disabled Button

Use the disabled prop to disable the button.

<Button className='btn-primary' disabled>
  Disabled Button
</Button>

Ripple Animation

Ripple Effect

Add the ripple prop to enable click ripple animation.

<Button className='btn-primary' ripple>
  Button with Ripple
</Button>

Link Integration

External Links

Use the href prop for external links.

<Button className='btn-primary' href='https://example.com'>
  External Link
</Button>

Router Links

Use the as and to props for router navigation.

<Button className='btn-primary' as={Link} to='/dashboard'>
  Dashboard
</Button>

Examples

Basic Buttons

<Card>
  <h4>Buttons</h4>
  <div className='space-x-2 flex flex-wrap gap-2'>
    <Button className='btn-primary'>Primary</Button>
    <Button className='btn-secondary'>Secondary</Button>
    <Button className='btn-success'>Success</Button>
    <Button className='btn-info'>Info</Button>
    <Button className='btn-warning'>Warning</Button>
    <Button className='btn-danger'>Danger</Button>
    <Button className='btn-dark'>Dark</Button>
    <Button className='btn-light'>Light</Button>
  </div>
</Card>

Rounded Buttons

<Card>
  <h4>Rounded Buttons</h4>
  <div className='space-x-2 flex flex-wrap gap-2'>
    <Button className='btn-primary rounded-full'>Primary</Button>
    <Button className='btn-secondary rounded-full'>Secondary</Button>
    <Button className='btn-success rounded-full'>Success</Button>
    <Button className='btn-info rounded-full'>Info</Button>
    <Button className='btn-warning rounded-full'>Warning</Button>
    <Button className='btn-danger rounded-full'>Danger</Button>
    <Button className='btn-dark rounded-full'>Dark</Button>
    <Button className='btn-light rounded-full'>Light</Button>
  </div>
</Card>

Outlined Buttons

<Card>
  <h4>Outlined Buttons</h4>
  <div className='space-x-2 flex flex-wrap gap-2'>
    <Button className='btn-primary outlined'>Primary</Button>
    <Button className='btn-secondary outlined'>Secondary</Button>
    <Button className='btn-success outlined'>Success</Button>
    <Button className='btn-info outlined'>Info</Button>
    <Button className='btn-warning outlined'>Warning</Button>
    <Button className='btn-danger outlined'>Danger</Button>
    <Button className='btn-dark outlined'>Dark</Button>
    <Button className='btn-light outlined'>Light</Button>
  </div>
</Card>

Outlined with Rounded Buttons

<Card>
  <h4>Outlined with Rounded Buttons</h4>
  <div className='space-x-2 flex flex-wrap gap-2'>
    <Button className='btn-primary outlined rounded-full'>Primary</Button>
    <Button className='btn-secondary outlined rounded-full'>Secondary</Button>
    <Button className='btn-success outlined rounded-full'>Success</Button>
    <Button className='btn-info outlined rounded-full'>Info</Button>
    <Button className='btn-warning outlined rounded-full'>Warning</Button>
    <Button className='btn-danger outlined rounded-full'>Danger</Button>
    <Button className='btn-dark outlined rounded-full'>Dark</Button>
    <Button className='btn-light outlined rounded-full'>Light</Button>
  </div>
</Card>

Icon Buttons

<Card>
  <h4>Buttons Icon</h4>
  <div className='space-x-2 flex flex-wrap gap-2'>
    <Button className='btn-primary btn-icon'>
      <NavIcon icon='lucide:home' />
    </Button>
    <Button className='btn-secondary btn-icon'>
      <NavIcon icon='lucide:star' />
    </Button>
    <Button className='btn-success btn-icon'>
      <NavIcon icon='lucide:check' />
    </Button>
    <Button className='btn-info btn-icon'>
      <NavIcon icon='lucide:info' />
    </Button>
    <Button className='btn-warning btn-icon'>
      <NavIcon icon='lucide:circle-alert' />
    </Button>
    <Button className='btn-danger btn-icon'>
      <NavIcon icon='lucide:circle-x' />
    </Button>
    <Button className='btn-dark btn-icon'>
      <NavIcon icon='lucide:moon' />
    </Button>
    <Button className='btn-light btn-icon'>
      <NavIcon icon='lucide:sun' />
    </Button>
  </div>
</Card>

Button Sizes

<Card>
  <h4>Buttons Size</h4>
  <div className='space-x-2'>
    <Button className='btn-primary'>Large</Button>
    <Button className='btn-primary btn-md'>Medium</Button>
    <Button className='btn-primary btn-sm'>Small</Button>
    <Button className='btn-primary btn-xs'>Extra Small</Button>
  </div>
</Card>

Loading Buttons

<Card>
  <h4>Buttons Loading</h4>
  <div className='space-x-2 flex flex-wrap gap-2'>
    <Button className='btn-primary loading btn-icon'>
      <NavIcon icon='lucide:loader-circle' className='animate-spin mr-2' />
      Primary
    </Button>
    <Button className='btn-secondary loading btn-icon'>
      <NavIcon icon='lucide:loader' className='animate-spin mr-2' />
      Secondary
    </Button>
    <Button className='btn-success loading btn-icon'>
      <NavIcon icon='lucide:loader-pinwheel' className='animate-spin mr-2' />
      Success
    </Button>
    <Button className='btn-info loading btn-icon'>
      <NavIcon icon='lucide:loader-circle' className='animate-spin mr-2' />
      Info
    </Button>
    <Button className='btn-warning loading btn-icon'>
      <NavIcon icon='lucide:loader-circle' className='animate-spin mr-2' />
      Warning
    </Button>
    <Button className='btn-danger loading btn-icon'>
      <NavIcon icon='lucide:loader-circle' className='animate-spin mr-2' />
      Danger
    </Button>
    <Button className='btn-dark loading btn-icon'>
      <NavIcon icon='lucide:loader-circle' className='animate-spin mr-2' />
      Dark
    </Button>
    <Button className='btn-light loading btn-icon'>
      <NavIcon icon='lucide:loader-circle' className='animate-spin mr-2' />
      Light
    </Button>
  </div>
</Card>

Gradient Buttons

<Card>
  <h4>Gradient Buttons</h4>
  <div className='space-x-2 flex flex-wrap gap-2'>
    <Button className='btn-gradient-primary'>Primary</Button>
    <Button className='btn-gradient-secondary'>Secondary</Button>
    <Button className='btn-gradient-success'>Success</Button>
    <Button className='btn-gradient-info'>Info</Button>
    <Button className='btn-gradient-warning'>Warning</Button>
    <Button className='btn-gradient-danger'>Danger</Button>
    <Button className='btn-gradient-dark'>Dark</Button>
    <Button className='btn-gradient-light'>Light</Button>
  </div>
</Card>

Disabled Buttons

<Card>
  <h4>Buttons Disabled</h4>
  <div className='space-x-2 flex flex-wrap gap-2'>
    <Button className='btn-primary' disabled>Primary</Button>
    <Button className='btn-secondary' disabled>Secondary</Button>
    <Button className='btn-success' disabled>Success</Button>
    <Button className='btn-info' disabled>Info</Button>
    <Button className='btn-warning' disabled>Warning</Button>
    <Button className='btn-danger' disabled>Danger</Button>
    <Button className='btn-dark' disabled>Dark</Button>
    <Button className='btn-light' disabled>Light</Button>
  </div>
</Card>

Disabled Outlined Buttons

<Card>
  <h4>Outlined with Rounded Buttons Disabled</h4>
  <div className='space-x-2 flex flex-wrap gap-2'>
    <Button className='btn-primary outlined rounded-full' disabled>Primary</Button>
    <Button className='btn-secondary outlined rounded-full' disabled>Secondary</Button>
    <Button className='btn-success outlined rounded-full' disabled>Success</Button>
    <Button className='btn-info outlined rounded-full' disabled>Info</Button>
    <Button className='btn-warning outlined rounded-full' disabled>Warning</Button>
    <Button className='btn-danger outlined rounded-full' disabled>Danger</Button>
    <Button className='btn-dark outlined rounded-full' disabled>Dark</Button>
    <Button className='btn-light outlined rounded-full' disabled>Light</Button>
  </div>
</Card>

Buttons with Animation

<Card>
  <h4>Buttons with animation</h4>
  <div className='space-x-2 flex flex-wrap gap-2'>
    <Button className='btn-primary' ripple>Primary</Button>
    <Button className='btn-secondary' ripple>Secondary</Button>
    <Button className='btn-success' ripple>Success</Button>
    <Button className='btn-info' ripple>Info</Button>
    <Button className='btn-warning' ripple>Warning</Button>
    <Button className='btn-danger' ripple>Danger</Button>
    <Button className='btn-dark' ripple>Dark</Button>
    <Button className='btn-light' ripple>Light</Button>
  </div>
</Card>

Soft Color Buttons

<Card>
  <h4>Buttons with Soft Color</h4>
  <div className='space-x-2 flex flex-wrap gap-2'>
    <Button className='btn-primary transparent' ripple>Primary</Button>
    <Button className='btn-secondary transparent' ripple>Secondary</Button>
    <Button className='btn-success transparent' ripple>Success</Button>
    <Button className='btn-info transparent' ripple>Info</Button>
    <Button className='btn-warning transparent' ripple>Warning</Button>
    <Button className='btn-danger transparent' ripple>Danger</Button>
    <Button className='btn-dark transparent' ripple>Dark</Button>
    <Button className='btn-light transparent' ripple>Light</Button>
  </div>
</Card>

CSS Classes Reference

Base Classes

• .btn - Base button class with padding, rounded corners, and transitions

Color Variants

• .btn-primary - Blue color scheme
• .btn-secondary - Indigo color scheme
• .btn-success - Emerald color scheme
• .btn-info - Sky color scheme
• .btn-warning - Amber color scheme
• .btn-danger - Rose color scheme
• .btn-dark - Slate color scheme
• .btn-light - Gray color scheme

Gradient Variants

• .btn-gradient-primary - Blue gradient
• .btn-gradient-secondary - Indigo to pink gradient
• .btn-gradient-success - Emerald to teal gradient
• .btn-gradient-info - Sky to cyan gradient
• .btn-gradient-warning - Amber to orange gradient
• .btn-gradient-danger - Rose to pink gradient
• .btn-gradient-dark - Slate to gray gradient
• .btn-gradient-light - Gray to white gradient

Style Modifiers

• .outlined - Bordered style with colored text
• .transparent - Light background with colored text
• .rounded-full - Pill-shaped button
• .disabled - Disabled state styling

Size Modifiers

• .btn-md - Medium size
• .btn-sm - Small size
• .btn-xs - Extra small size
• .block - Full width button

Icon Modifiers

• .btn-icon - Icon button styling
• .btn-icon-square - Square icon button

Styling

The Button component uses Tailwind CSS classes and includes:

• Responsive Design: Works on all screen sizes
• Dark Mode Support: Automatic dark mode variants
• Smooth Transitions: 150ms transition duration
• Hover Effects: Color changes and shadow effects
• Icon Support: Integrated with NavIcon component
• Ripple Animation: Click ripple effect with CSS animations

Accessibility

The Button component includes accessibility features:

• Semantic HTML structure
• Proper color contrast ratios
• Keyboard navigation support
• Screen reader friendly
• Disabled state handling
• Focus indicators

Best Practices

1. Choose appropriate colors for the action type:

   • Primary: Main actions
   • Success: Positive actions
   • Warning: Cautions
   • Danger: Destructive actions
   • Info: Informational actions

2. Use consistent sizing within your interface

3. Include loading states for async actions

4. Provide clear labels for screen readers

5. Use ripple effects sparingly for emphasis

6. Consider disabled states for unavailable actions

Common Use Cases

• Form submissions: Submit, Cancel, Reset
• Navigation: Next, Previous, Back
• Actions: Save, Delete, Edit, View
• Status changes: Activate, Deactivate, Publish
• File operations: Upload, Download, Export

Related Components

• NavIcon - Used for displaying icons in buttons
• Card - Often used as a container for button examples
• ButtonGroup - For grouping related buttons