Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Actions

Comment Actions Button Group for React

Reply, Edit, Delete and Report as ghost buttons under a comment, with a compact icon-only row of the first three.

Framework
UI library

The actions under a comment in a thread. Ghost buttons keep the row light so it doesn't compete with the comment itself. The second row is the compact form, icon-only outline buttons with an aria-label each, for dense lists where every reply has its own controls.

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

Why are the labeled buttons ghost?

A comment can carry these actions in every row of a thread. variant="ghost" shows no border or fill until hover, so the actions stay quiet. The icon-only row uses outline so the small buttons have a visible edge.

What is in each row?

The first group is Reply, Edit, Delete and Report, each with an icon before the label. The second group drops Report and shows Reply, Edit and Delete as icons.

How are the icon-only buttons named?

Each one has an aria-label, Reply, Edit or Delete, and the icon has aria-hidden="true". They use size="icon-sm", a square button.

Should everyone see Edit and Delete?

Usually only the author or a moderator. Render those buttons conditionally from your own permissions. The demo shows all of them.

Do the buttons do anything?

No. They have no click handler. Wire Reply to open your reply field, and Delete to a confirmation such as an Alert Dialog.

How does keyboard focus move through them?

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

All 39 button group examples