Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Standard

Button Group Variants for React

Two outline button groups of editing actions, Copy, Paste and Cut, then Undo and Redo.

Framework
UI library

Two short rows of editing actions, each its own ButtonGroup. Every button keeps the outline variant, which is what lets the shared border between them line up. Switch the variant for the whole group when you want a filled or quieter look.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Which variants does this demo render?

Both groups set variant to outline on every button. The first group is Copy, Paste and Cut, and the second is Undo and Redo.

What size are these buttons?

They omit size, so they use the button's default height. Set size on each Button when you want sm or lg, and use the same value on every button in that group.

Do Copy and Paste run an action?

No. The buttons have no click handler. Put the action on the Button you want to run.

Why are Undo and Redo in a second group?

They are a separate ButtonGroup under the first, in a column with gap-4. Each group keeps its own shared border and its own aria-label, Clipboard and History.

How do I make the buttons filled?

Set variant to default or secondary on every button in the group. Keep one variant per group so the joined edges match.

How does keyboard focus work here?

Tab moves from button to button. Enter or Space activates the focused button. The group does not handle Arrow keys.

All 39 button group examples