Normal Buttons

Static and interaction elements. From the strong geometry and saturated colors of our Ink & Acid style to the purity and transparency of modern minimalism.

The Shredder (Secure Destruction)

An extreme alternative to delete confirmation dialogs. Drag the file into the glass shredder to destroy it irreversibly.

Drag to shred

Secret.pdf

Shredder

API Reference

Available configuration to customize the component.

Prop	Type	Default	Description
instructionText	string	"Drag to shred"	Main instructional text
fileName	string	"Secret.pdf"	Name of the file being shredded
shredderText	string	"Shredder"	Label on the shredder machine
restoreText	string	"Restore"	Text for the reset button
className	string	—	Optional custom class name for the container

Primary Action

The standard of our platform. Acid green, square, heavy shadow.

API Reference

Available configuration to customize the component.

Prop	Type	Default	Description
children	ReactNode	—	Button content
color	string	"#ccff00"	Background color
className	string	—	Optional custom class name
...props	ButtonHTMLAttributes	—	All standard HTML button attributes

Pill Secondary

Rounded white button. On hover, it instantly inverts its colors.

API Reference

Available configuration to customize the component.

Prop	Type	Default	Description
children	ReactNode	—	Button content
className	string	—	Optional custom class name
...props	ButtonHTMLAttributes	—	All standard HTML button attributes

Danger Alert

100% straight edges. On hover, it tilts (-5deg) to convey urgency.

API Reference

Available configuration to customize the component.

Prop	Type	Default	Description
children	ReactNode	—	Button content
color	string	"#ff0000"	Background color of the button
className	string	—	Optional custom class name
...props	ButtonHTMLAttributes	—	All standard HTML button attributes

Ghost Outline

Dashed border. Fills with solid black upon interaction.

API Reference

Available configuration to customize the component.

Prop	Type	Default	Description
children	ReactNode	—	Button content
className	string	—	Optional custom class name
...props	ButtonHTMLAttributes	—	All standard HTML button attributes

Retro Poster

Giant, expanded font, 8px border, and a massive 16px shadow-sm. For epic calls to action.

API Reference

Available configuration to customize the component.

Prop	Type	Default	Description
children	ReactNode	—	Button content
color	string	"#ff00ff"	Background color of the button
className	string	—	Optional custom class name
...props	ButtonHTMLAttributes	—	All standard HTML button attributes

3D Elevation

Simulates physical depth using 'border-b-12'. On click, it flattens against the background.

API Reference

Available configuration to customize the component.

Prop	Type	Default	Description
children	ReactNode	—	Button content
color	string	"#00e5ff"	Background color of the button
className	string	—	Optional custom class name
...props	ButtonHTMLAttributes	—	All standard HTML button attributes

Minimalist Collection

Subtle interaction design, silky transparency, and diffuse shadows. Perfect for Glassmorphism or Soft UI interfaces.

Glassmorphism Button

Blurred background (backdrop-blur) with an ultra-thin semi-transparent border.

API Reference

Available configuration to customize the component.

Prop	Type	Default	Description
children	ReactNode	—	Button content
className	string	—	Optional custom class name
...props	ButtonHTMLAttributes	—	All standard HTML button attributes

Soft Glow Button

Diffuse shadow-sm that simulates a slight light emission (Aura) behind the button.

API Reference

Available configuration to customize the component.

Prop	Type	Default	Description
children	ReactNode	—	Button content
className	string	—	Optional custom class name
...props	ButtonHTMLAttributes	—	All standard HTML button attributes

Underline Reveal

Ghost button where a 1px bottom border smoothly expands on hover.

API Reference

Available configuration to customize the component.

Prop	Type	Default	Description
children	ReactNode	—	Button content
className	string	—	Optional custom class name
...props	ButtonHTMLAttributes	—	All standard HTML button attributes

Neumorphic Subtle

Carved effect on the surface using ultra-fine inverted lights and shadows when interacting.

API Reference

Available configuration to customize the component.

Prop	Type	Default	Description
children	ReactNode	—	Button content
className	string	—	Optional custom class name
...props	ButtonHTMLAttributes	—	All standard HTML button attributes

Outline Shift

Initial 1px border that fills with inverted color via a directional animation.

API Reference

Available configuration to customize the component.

Prop	Type	Default	Description
children	ReactNode	—	Button content
className	string	—	Optional custom class name
...props	ButtonHTMLAttributes	—	All standard HTML button attributes

Pure Minimal

The essence of a premium button. Solid color with a microscopic scale shift (1.03x) on hover.

API Reference

Available configuration to customize the component.

Prop	Type	Default	Description
children	ReactNode	—	Button content
className	string	—	Optional custom class name
...props	ButtonHTMLAttributes	—	All standard HTML button attributes