Button

Accessible button with 6 variants, 8 sizes, and 8 motion animations.

@akex/button

Installation

npm install @akex/button

Usage

import { Button } from "@akex/button";

<Button variant="default" size="default">
  Click me
</Button>

{/* With animation */}
<Button animation="shimmer">Animated</Button>

Variants

default

secondary

destructive

outline

ghost

link

Sizes

xs

sm

default

lg

icon

Disabled State

Animations

Pass the animation prop to enable a built-in motion preset. Animations are disabled automatically on disabled buttons.

Shimmer

Looping light-sweep glint clipped inside the button — polished & eye-catching.

animation="shimmer"

Ripple

Material-style expanding wave on click, perfectly clipped to the button shape.

animation="ripple"

Elastic

X/Y axes squish in opposite directions on hover — satisfying rubber-band feel.

animation="elastic"

Glow

Neon violet aura pulses continuously and blazes on hover — high-energy CTA.

animation="glow"

Tilt

3-D perspective rotation toward the cursor — elegant depth effect.

animation="tilt"

Bounce

Spring lift on hover, soft press on tap — playful & approachable.

animation="bounce"

Pulse

Continuous heartbeat scale loop — draws attention to a primary CTA.

animation="pulse"

Press

Shadow-depth lift on hover, deep press on tap — satisfying physical button feel.

animation="press"

Props

Prop	Type	Default	Description
variant	string	"default"	Visual style
size	string	"default"	Button dimensions
animation	ButtonAnimation	—	"shimmer" \| "ripple" \| "elastic" \| "glow" \| "tilt" \| "bounce" \| "pulse" \| "press"
disabled	boolean	false	Disables interaction and animation
className	string	—	Extra Tailwind classes
...props	ButtonProps	—	All native button attributes

Back