Component
Dashed Outline Button
Outline buttons with dashed borders for a modern look
- Component
- Tailwind
- MIT
Preview
Live component
9:41 100%
devsnips.site/library/tailwind/components/buttons/outline-button/dashed/ fluid · no fixed width 100%
Install
Add to your project
npx devsnips add Tailwind/Components/Buttons/outline-button/dashed Tailwind/Components/Buttons/outline-button/dashed <!-- 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 Dashed
Dashed outline button.
## Preview
Open `preview.html` for a standalone demonstration.
## Features
- Dashed border treatment
- Focus-visible states
## Usage
```bash
npx devsnips add Tailwind/Components/Buttons/outline-button/dashed
```
Copy from `code.html`.
## Customization
- Border style/color, text color, hover fill
## Accessibility
- Native `<button>`
## Dependencies
- Tailwind CSS only
## File Structure
- `code.html` · `preview.html` · `metadata.json` · `README.md` 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/dashed I want to use this DevSnips resource in production: Page: https://devsnips.site/library/tailwind/components/buttons/outline-button/dashed/ Install: npx devsnips add Tailwind/Components/Buttons/outline-button/dashed This is the Dashed Outline Button — Outline buttons with dashed borders for a modern look 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/dashed