❍Depth Button
04 / 08button

Depth Button

A tactile raised button with a fixed depth base — lifts on hover, snaps down on press.

buttoninteractive3d

Installation

▸ Run the following command

npx shadcn@latest add https://mellowui.com/r/depth-button.json

▸ Or install manually

  1. Copy the source from the Code tab above.
  2. Place it at components/mellow/depth-button.tsx
  3. Import and use.

API Reference

PropTypeDefaultDescription
childrenReact.ReactNode—Button label content.
variant"default" | "accent""default"Color scheme — default is neutral glass, accent is purple.
depthnumber4Height of the depth base in pixels.
classNamestring—Additional CSS classes.