Button components
16 free, copy-and-go React Button examples built on the SevenUI Button primitive. Install any of them with the shadcn CLI.
On this page
With icons
Buttons with leading and trailing icons across variants.
Call to action pair
A hero-style primary and ghost action pair.
Ready to get started?
Set up your workspace in minutes, no credit card required.
Sign-in method stack
Full-width passkey, SSO and magic-link sign-in buttons where the chosen method shows a spinner and locks the others.
Sign in to Northwind
Use the method your workspace admin set up.
New to Northwind? Ask your admin for an invite.
Keyboard shortcut hints
Buttons that display their keyboard shortcut in trailing key caps, with working Cmd or Ctrl shortcuts and aria-keyshortcuts.
Try the shortcuts, or click a button.
Counts and avatars
Buttons carrying unread count badges, a collaborator avatar stack, and a signed-in account avatar with a secondary email line.
Two-line download buttons
Tall buttons with an icon tile, a label and a metadata line for platform-specific downloads.
Requires macOS 13, Windows 10, or Ubuntu 22.04 and later.
Pressed toggle states
Follow, star and watch buttons that switch variant, icon and count through aria-pressed, with a hover-to-unfollow swap.
northwind/design-tokens
Maintained by Maya Chen · updated 2 hours ago
Copy with icon morph
Copy buttons whose icon and label cross-fade into a check confirmation, with a tooltip and a live announcement.
npx shadcn add @sevenui/buttonAsync status cycle
A deploy button that moves through idle, pending, success and error with retry, plus a switch to simulate a failure.
Build 2481 from main is ready to ship.
Expanding icon buttons
An icon-only message toolbar whose buttons slide their label open on hover or keyboard focus.
Q3 roadmap review moved to Thursday
Priya shared the updated agenda. We will walk through the billing migration first, then the onboarding experiments.
Hold to confirm
A destructive button that fills while pressed and only deletes after a 1.5 second hold, with pointer and keyboard support and an undo.
Delete staging workspace
Resend with cooldown
A verification screen whose Resend code button counts down between attempts, stays focusable while disabled and stops at a resend limit.
Check your inbox
We sent a 6-digit code to maya@northwind.studio. It expires in 10 minutes.
Add to bag
A product purchase panel with size selection, a quantity stepper, a wishlist toggle and a stateful add-to-bag button.
Merino crew sweater
Oat · Relaxed fit
$68
Select a size to add this item to your bag.
Load more
A release notes list with a load-more button that shows the next batch and remaining count, then moves focus to the first new entry.
File picker trigger
A button that opens a hidden file input, then swaps to a file row with replace and remove actions and an invalid state for oversized files.
Proof of address
Buttons as links
Previous and next page links plus an external edit link, styled with buttonVariants on real anchor elements.
Components are the parts. Blocks are the page.
Pro blocks are whole sections and pages — heroes, pricing, dashboards, auth — composed from the same primitives and themed by the same tokens you already use. Install one and it is yours.
One purchase, yours forever. $99 at launch instead of $249.