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

npx rareui@latest add soft-button
Or copy the component source manually into components/rareui/SoftButton.tsx.

​
Usage

import SoftButton from '@/components/rareui/SoftButton';

export default function App() {
  return (
    <SoftButton onClick={() => alert('Clicked!')}>
      Click Me
    </SoftButton>
  );
}
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

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

​
Examples

​
Default button

<SoftButton>Submit</SoftButton>

​
Custom size via className

<SoftButton className="h-14 w-48">
  Get Started
</SoftButton>

​
With click handler

<SoftButton onClick={() => router.push('/dashboard')}>
  Dashboard
</SoftButton>

​
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us