Depth Button
A tactile raised button with a fixed depth base — lifts on hover, snaps down on press.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/depth-button.json▸ Or install manually
- Copy the source from the Code tab above.
- Place it at
components/mellow/depth-button.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | — | Button label content. |
| variant | "default" | "accent" | "default" | Color scheme — default is neutral glass, accent is purple. |
| depth | number | 4 | Height of the depth base in pixels. |
| className | string | — | Additional CSS classes. |