Components/Button17

Design system primitives: buttons, badges and other building blocks our sections are composed from. Install one and reuse it across your whole project.

Seal Arrow Button

button1

An uppercase pill button with a trailing seal arrow chip and an optional link.

Underline Arrow Button

button2

A minimal text button with an animated underline and arrow for lightweight calls to action.

Async Loading Button

button3

An async loading button that shows a spinner and disables itself while a promise resolves.

Icon Button

button4

An accessible icon button with a required label, three sizes, and circle or square shape.

Split Button

button5

A split button with a main action and a separate secondary trigger for menus and options.

Avatar Stack Button

button6

A social proof button with an avatar stack inside the pill and a trailing arrow.

Play Button

button7

A video play button with a circular play seal, label, and duration for showreels and product demos.

Pressable Button

button11

A neobrutalist button with a hard offset shadow that lifts on hover and presses in on click.

Editorial CTA Button

button12

An editorial pill button with a rolling label and animated icon seal on hover.

Letter Roll Button

button13

A pill button whose label rolls up letter by letter with a staggered hover animation.

Hold to Confirm Button

button14

A hold to confirm button that fills while held and fires only when the hold completes.

Expanding Reveal Button

button15

An expanding icon button that reveals its label on hover or focus for compact layouts.

Shine Sweep Button

button16

A premium pill button with a diagonal shine sweep on hover for pricing and upgrade actions.

Copy to Clipboard Button

button17

A click to copy button for install commands, API keys, and coupon codes with copied feedback.

Corner Brackets Button

button18

A monospace button framed by corner brackets that spring outward on hover.

Scramble Button

button19

A scramble text button that cycles random glyphs on hover for developer and tech landings.

Magnetic Button

button20

A magnetic button that is pulled toward the cursor on hover and springs back on leave.