Component
Basic Button
Foundation button styles with semantic color variants
- Component
- Tailwind
- MIT
Preview
Live component
9:41 100%
devsnips.site/library/tailwind/components/buttons/basic-button/ fluid · no fixed width 100%
Install
Add to your project
npx devsnips add Tailwind/Components/Buttons/basic-button Tailwind/Components/Buttons/basic-button <!-- 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># 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 14 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/basic-button I want to use this DevSnips resource in production: Page: https://devsnips.site/library/tailwind/components/buttons/basic-button/ Install: npx devsnips add Tailwind/Components/Buttons/basic-button This is the Basic Button — Foundation button styles with semantic color variants 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/basic-button