Button

A versatile button component with multiple variants, sizes, color schemes, and states

Variants

import { Button } from 'uiplex'

<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="outline">Outline Button</Button>
<Button variant="link">Link Button</Button>

Sizes

<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Color Schemes

<Button colorScheme="blue">Blue</Button>
<Button colorScheme="green">Green</Button>
<Button colorScheme="red">Red</Button>
<Button colorScheme="yellow">Yellow</Button>
<Button colorScheme="purple">Purple</Button>
<Button colorScheme="gray">Gray</Button>

With Icons

import { Mail } from 'feather-icons-react'

<Button 
  leftIcon={<Mail size={16} />}
  variant="primary"
>
  Send Email
</Button>

<Button 
  rightIcon={<span>→</span>}
  variant="outline"
>
  Continue
</Button>

<Button 
  leftIcon={<span>⭐</span>}
  rightIcon={<span>💫</span>}
  variant="secondary"
>
  Star
</Button>

Loading State

<Button loading>Loading...</Button>
<Button loading variant="outline" size="sm">Loading</Button>
<Button loading variant="link">Loading Link</Button>

States

<Button>Normal</Button>
<Button disabled>Disabled</Button>
<Button onClick={() => alert('Button clicked!')}>
  Clickable
</Button>

Combined Examples

import { Trash } from 'feather-icons-react'

<Button 
  variant="primary" 
  colorScheme="green" 
  size="lg"
  leftIcon={<span>✅</span>}
>
  Success Action
</Button>

<Button 
  variant="outline" 
  colorScheme="red" 
  size="sm"
  rightIcon={<Trash size={16} />}
>
  Delete
</Button>

<Button 
  variant="link" 
  colorScheme="purple"
  leftIcon={<span>🔗</span>}
>
  External Link
</Button>

API Reference

Prop	Type	Default	Description
variant	'primary' \| 'secondary' \| 'outline' \| 'link'	'primary'	The visual style variant of the button
size	'xs' \| 'sm' \| 'md' \| 'lg'	'md'	The size of the button
colorScheme	'blue' \| 'green' \| 'red' \| 'yellow' \| 'purple' \| 'gray'	'blue'	The color scheme of the button
disabled	boolean	false	Whether the button is disabled
loading	boolean	false	Whether the button is in loading state
leftIcon	React.ReactNode	-	Icon to display on the left side
rightIcon	React.ReactNode	-	Icon to display on the right side
onClick	() => void	-	Click handler function
className	string	''	Additional CSS classes