Soft Button
A neumorphic button with soft shadows, hover effects, and smooth animations.
Button
Installation
pnpm dlx rareui add soft-button
Usage
1
Import the component
import SoftButton from '@/components/rareui/SoftButton';
2
Use in your application
export default function App() {
return (
<SoftButton onClick={() => alert('Clicked!')}>
Click Me
</SoftButton>
);
}
Features
Soft, multi-layered shadows for a 3D raised effect.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | "Button" | The content to display inside the button. |
className | string | - | Additional CSS classes for the outer wrapper. |
...props | React.HTMLAttributes<HTMLDivElement> | - | Any additional HTML div attributes (onClick, onMouseEnter, etc.). |