Component
Outline Button
Bordered buttons with transparent backgrounds in solid, thick, and dashed styles
- Component
- Tailwind
- MIT
Preview
Live component
9:41 100%
devsnips.site/library/tailwind/components/buttons/outline-button/ fluid · no fixed width 100%
Install
Add to your project
npx devsnips add Tailwind/Components/Buttons/outline-button Tailwind/Components/Buttons/outline-button <!-- 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># 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 9 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf
Agent skill & Model Context Protocol
Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.
devsnips://components/buttons/outline-button I want to use this DevSnips resource in production: Page: https://devsnips.site/library/tailwind/components/buttons/outline-button/ Install: npx devsnips add Tailwind/Components/Buttons/outline-button This is the Outline Button — Bordered buttons with transparent backgrounds in solid, thick, and dashed styles Use this DevSnips resource as the starting point for my project. Adapt it to my project's stack and conventions, fix any issues, and make it production-ready while preserving its intended design and behavior.
Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.
Resource URI
devsnips://components/buttons/outline-button