Buttons & Actions

React button components for Tailwind CSS

Buttons are the most repeated control in any interface, so this category keeps them consistent. Button has five variants (solid, soft, outline, ghost and link), six tones, three sizes plus icon sizes, and a loading state that keeps its width. Button Group joins buttons into one control or a split button with a menu. Copy Button and Delete Button cover two common actions: copying an IBAN, an API key or a link with one tap, and confirming a delete in place without a dialog. Toggle and Toggle Group stay pressed for editor formatting, favorites and view switches, and Theme Toggle switches between light, dark and system on top of next-themes.

[7] components[3] free[4] Pro

All Buttons & Actions[7]

Toggle

A two-state button that stays pressed, for bold and italic in an editor, a favorite heart, mute, or a filter pill.

ButtonFree

The button every screen starts with: five variants, six tones, three sizes plus icon sizes, and a loading state that never jumps.

Button Group

Buttons joined into one control or spaced in a row, plus a split button that pairs a main action with a menu.

Copy ButtonFree

Copy an IBAN, a tax ID, a link or an API key with one tap: an icon button with a tooltip, a labelled button, and CopyText for inline values.

Theme Toggle

Switch light, dark and system on top of next-themes: an animated sun / moon button, a segmented control or a menu, with a circular reveal.

Toggle Group

A row of toggles where one or several stay pressed, for text formatting, alignment, view switches and quick filters.

Delete ButtonFree

A delete button that asks for confirmation in place, no dialog needed.

Guides

Tutorials and guides from the blog that use these components.

All posts

Comparisons and alternatives
14 shadcn Alternatives in 2026: Price, Mobile and MCP
14 shadcn alternatives checked in October 2026: free and paid UI libraries by license, price, mobile behavior and MCP support, with a pick per use case.
Oct 9, 202619 min read
Building UI with AI agents
AGENTS.md vs CLAUDE.md vs Cursor Rules for React
AGENTS.md vs CLAUDE.md vs Cursor rules for React and Tailwind: which agent reads which file in October 2026, and a rules file that keeps agents on your tokens.
Oct 9, 202614 min read
Building UI with AI agents
Claude Code shadcn Setup: MCP Server, Skill and CLAUDE.md
Claude Code shadcn setup, tested on shadcn 4.21.4: the MCP server, the skill, a second registry in its own folder, a CLAUDE.md block and prompts that work.
Oct 9, 202612 min read
Building UI with AI agents
Component Library MCP: Make Agents Use Real Components
How a component library MCP server, rules files, llms.txt and a registry get Claude Code, Cursor and Codex to install real components instead of guessing.
Oct 9, 202625 min read
Component guides
How to Update shadcn Components Without Losing Edits
Update shadcn components without losing edits: what shadcn diff and add --diff show, why a 2-way diff hides whose change is whose, and how a 3-way merge works.
Oct 9, 202610 min read
Component guides
IBAN Validation JavaScript: Mod 97, Regex and a React Field
IBAN validation JavaScript that catches typos: mod 97 in TypeScript, why a regex is not enough, a React field that formats as you type and Romanian banks.
Oct 9, 202612 min read

About Buttons & Actions

On a phone the medium size grows to 44px and the small size keeps a 44px hit area, presses spring through the shared motion presets, and every button shows a visible focus ring. Each one reads app-wide defaults from UIProvider, so you can set the size, radius or tone once for the whole app. 3 of the 7 button components are free: the source is open to everyone through the CLI, shadcn and the docs page (the MCP server needs a free account key). The other 4 are part of Pro.