A minimal, theme-agnostic React button component
npm install @metadiv-studio/buttonA minimal, theme-agnostic React button component with built-in loading states, tooltips, and customizable variants. Built on top of Radix UI primitives for accessibility and flexibility.
``bash`
npm install @metadiv-studio/button
This package uses Tailwind CSS for styling. To ensure the component styles work correctly in your project, you need to add the package's files to your tailwind.config.js content configuration:
`js`
// tailwind.config.js
module.exports = {
content: [
// ... your existing content paths
"./node_modules/@metadiv-studio/*/.{js,ts,jsx,tsx}",
],
// ... rest of your config
}
Note: Without this configuration, the button component may not display with the correct styles.
The Button component supports standard HTML button props along with variant and className for styling:
`tsx
import { Button } from '@metadiv-studio/button';
function App() {
return (
);
}
`
- Variants: Use built-in variants like default, destructive, outline, secondary, ghost
- Custom Styling: Add your own for custom styles (note: text size cannot be changed for system consistency)loading={true}
- Loading States: Built-in loading spinner with
- Tooltips: Display tooltips on hover with
- Accessibility: Full keyboard navigation and screen reader support
- Sizes: Predefined sizes (, sm, lg, icon) with consistent text sizing
The component includes several custom variants that extend the base button functionality:
- default: Primary button with hover effects
- destructive: Red button for destructive actions
- outline: Bordered button with subtle hover effects
- secondary: Secondary button with primary color accents
- ghost: Minimal button with hover background
Important: The button component enforces a fixed text size (text-xs`) across all variants and sizes. This is intentional to maintain system-wide consistency and cannot be overridden through className. This ensures a cohesive design language across your application.
- React 18.2+
- React DOM 18.2+