Skip to main content

​
Overview

Soft Button uses four-layer neumorphic box-shadow stacks (two outer, two inset) to simulate a softly raised surface. On hover the background inverts to solid black (or white in dark mode), the letter-spacing widens, and a primary-color glow ring appears — all within a 600ms ease transition.

​
Installation

Or copy the component source manually into components/rareui/SoftButton.tsx.

​
Usage

The outer wrapper is a div, not a button element. Pass event handlers like onClick via the ...props spread. For keyboard accessibility, add role="button" and tabIndex={0} when needed.

​
Props

​
React.ReactNode
default:"Button"
Content displayed inside the button.
​
string
Additional Tailwind classes applied to the outer wrapper div. Useful for overriding the default fixed h-[50px] w-[160px] dimensions.
​
React.HTMLAttributes<HTMLDivElement>
Any standard HTML div attribute — onClick, onMouseEnter, aria-*, etc.

​
Examples

​
Default button

​
Custom size via className

​
With click handler

​
Features

Neumorphic shadow stack

Four-layer box-shadow — two outer and two inset — create a convincingly raised soft surface.

Letter-spacing animation

Tracking expands from 1px to 2px on hover, adding a dynamic kinetic feel.

Primary-color glow

A CSS-variable-based hsl(var(--primary)) glow ring appears on hover for theme-aware highlighting.

Active press feedback

scale(0.98) on active state gives tactile confirmation of a click.

600ms smooth transitions

All state changes — background, shadow, scale, tracking — transition together at 600ms.

Dark mode support

Shadow opacities and hover colors are independently tuned for light and dark themes.