Soft Button

A neumorphic button with soft shadows and hover effects.

Button

Installation

Run the following command to install the component:

npx rareui add soft-button

This will install the component to components/rareui/ directory.

Props

PropTypeDefaultDescription
childrenReact.ReactNode"Button"The content to display inside the button.
classNamestring-Additional CSS classes for the outer wrapper.
...propsReact.HTMLAttributes<HTMLDivElement>-Any additional HTML div attributes.

Features

  • Neumorphic Design: Soft, multi-layered shadows for a 3D effect
  • Theme Aware: Uses CSS variables for primary colors
  • Smooth Transitions: 600ms animated state changes
  • Dark Mode Support: Optimized shadows for both light and dark themes
  • Letter Spacing Animation: Expands tracking on hover for dynamic effect
Previous
Next