Component
Neutral Button
Neutral buttons designed for dark backgrounds with light and dark variants
- Component
- Tailwind
- MIT
Preview
Live component
9:41 100%
devsnips.site/library/tailwind/components/buttons/basic-button/neutral/ fluid · no fixed width 100%
Install
Add to your project
npx devsnips add Tailwind/Components/Buttons/basic-button/neutral Tailwind/Components/Buttons/basic-button/neutral <!-- Neutral Button - Light on Dark -->
<button class="px-6 py-2.5 bg-white text-gray-900 font-medium rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-900 transition-colors">
Light on Dark
</button>
<!-- Neutral Button - Dark -->
<button class="px-6 py-2.5 bg-gray-800 text-white font-medium rounded-lg hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-gray-900 transition-colors">
Dark
</button># Basic Button Neutral
Neutral / secondary-styled basic button for less prominent actions.
## Preview
Open `preview.html` for a standalone demonstration of this variant.
## Features
- Neutral color treatment
- Focus-visible states
- Native button
## Usage
```bash
npx devsnips add Tailwind/Components/Buttons/basic-button/neutral
```
Copy from `code.html`.
## Customization
- Neutral palette utilities
- Spacing and radius
## Accessibility
- Native `<button>`
- Focus-visible styles
## Dependencies
- Tailwind CSS only
## File Structure
- `code.html` — copy/paste snippet
- `preview.html` — standalone demo
- `metadata.json` — metadata
- `README.md` — this file 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/basic-button/neutral I want to use this DevSnips resource in production: Page: https://devsnips.site/library/tailwind/components/buttons/basic-button/neutral/ Install: npx devsnips add Tailwind/Components/Buttons/basic-button/neutral This is the Neutral Button — Neutral buttons designed for dark backgrounds with light and dark 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/neutral