Outline Button

1
2
3
4
5
6
7
8
9

<!-- Dashed Border Button -->
<button class="px-6 py-3 border-2 border-dashed border-gray-400 text-gray-600 font-medium rounded-lg hover:border-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors">
  Dashed Outline
</button>

<!-- Dashed Border Button - Blue -->
<button class="px-6 py-3 border-2 border-dashed border-blue-400 text-blue-600 font-medium rounded-lg hover:border-blue-600 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors">
  Dashed Blue
</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

# Outline Button

Bordered buttons with transparent backgrounds in solid, thick, and dashed styles.

## Variants

| Variant | Description |
|---------|-------------|
| [Primary](./primary/) | Blue bordered buttons |
| [Thick](./thick/) | Bold thick border styles |
| [Dashed](./dashed/) | Dashed border variants |
| Sizes | All button sizes |

## Quick Start

```html
<button class="px-6 py-2.5 border-2 border-blue-600 text-blue-600 font-medium rounded-lg hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
  Outline 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
- [Ghost Button](../ghost-button/) - Transparent hover buttons
- [Filled Button](../filled-button/) - Soft background variants