Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Popover examples · Standard

Popover with Actions for React

A popover with Edit, Share and Delete buttons stacked at full width.

Framework
UI library

An Actions button that opens Edit, Share and Delete as full-width buttons, with Delete in the destructive style. Each one closes the panel. Use it for a few actions on one item when a menu would be overkill. In React, Base UI handles opening, dismissing and focus.

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

How are Edit, Share, and Delete laid out?

Three Buttons with w-full, spaced by gap-2 on the panel. Edit uses the default variant, Share variant="outline" and Delete variant="destructive". Choosing any of them closes the panel.

How do I close this panel from code?

Edit, Share and Delete each close the panel. Here the panel is controlled: open and onOpenChange on Popover, and the button's handler sets the state to false. The callback gets the next open state first.

How does the Actions button become the trigger?

The trigger is a Button with variant="outline" and the label Actions. PopoverTitle reads Actions and has className="sr-only". Pass the button to render on PopoverTrigger, and use PopoverContent as the panel.

What order are the actions in?

Edit, then Share, then Delete, which is the order of the buttons in the file. Delete is the one with variant="destructive". Share is variant="outline". All three are w-full.

Where is the panel title?

PopoverTitle is sr-only and reads Actions, the same word as the trigger. The three buttons are the visible content.

How does this panel dismiss?

Escape closes the panel and returns focus to the trigger. A click outside closes it too. The panel sits beside the button, and the rest of the page stays usable.

All 15 popover examples