Ghost Button

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

<!-- Ghost Button - Default -->
<button class="px-6 py-2.5 text-blue-600 font-medium rounded-lg hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors">
  Default
</button>

<!-- Ghost Button - Disabled -->
<button class="px-6 py-2.5 text-blue-600 font-medium rounded-lg hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors" disabled>
  Disabled
</button>

<!-- Ghost Button - With Icon -->
<button class="inline-flex items-center gap-2 px-6 py-2.5 text-blue-600 font-medium rounded-lg hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors">
  <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
  New Item
</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

# Ghost Button

Transparent buttons that reveal background color on hover.

## Variants

| Variant | Description |
|---------|-------------|
| [Primary](./primary/) | Transparent buttons with blue hover effect |
| Sizes | All button sizes |

## Quick Start

```html
<button class="px-6 py-2.5 text-blue-600 font-medium rounded-lg hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors">
  Ghost Button
</button>
```

## Accessibility

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

## Related

- [Basic Button](../basic-button/) - Solid background buttons
- [Outline Button](../outline-button/) - Bordered buttons
- [Filled Button](../filled-button/) - Soft background variants