Basic Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- Full Width Button -->
<button class="w-full px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
  Full Width Button
</button>

<!-- Split Buttons - Left -->
<button class="px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
  Split Left
</button>

<!-- Split Buttons - Right -->
<button class="px-6 py-3 bg-gray-200 text-gray-900 font-medium rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
  Split Right
</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# Basic Button

Foundation button styles with semantic color variants.

## Variants

| Variant | Description |
|---------|-------------|
| [Primary](./primary/) | Primary action buttons with blue color |
| [Secondary](./secondary/) | Secondary buttons with multiple color options |
| [Neutral](./neutral/) | Buttons designed for dark backgrounds |
| [Sizes](./sizes/) | All button sizes from small to extra large |
| [Full Width](./full-width/) | Full width and split width buttons |

## Quick Start

```html
<button class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Click Me
</button>
```

## Accessibility

- All buttons include visible focus rings
- Use `disabled` attribute for disabled state
- Minimum touch target: 44×44px

## Related

- [Ghost Button](../ghost-button/) - Transparent buttons with hover effects
- [Outline Button](../outline-button/) - Bordered buttons
- [Filled Button](../filled-button/) - Soft background variants