Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Actions

File Operations Button Group for React

Download, Share, Edit and Delete in one button group, with labels and as a compact icon-only row.

Framework
UI library

The four things people do with a file, kept together. The labeled row suits a file detail page; the icon-only row fits a table cell or a card corner, where each button carries an aria-label instead of text.

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

What is in the labeled row?

Download, Share, Edit and Delete. Each has an icon before the label, size="sm" and variant="outline". None of them have a click handler.

How is the icon-only row named?

Each Button has an aria-label with the action's name and size="icon-sm". The icons have aria-hidden="true", so only the label is read.

Is Delete styled differently?

No. It uses the same variant="outline" as the others, so the joined border stays even. Confirm the delete in a dialog rather than relying on a red button.

How do I make Download a real link?

Pass render with an anchor and nativeButton={false} on the Button.

Do the two rows share state?

No. They are two layouts of the same actions, stacked with gap-4. Nothing in the file is stateful.

Should the icon buttons have tooltips?

For people using a mouse, a Tooltip with the same words as the aria-label helps. The demo leaves them out.

All 39 button group examples