Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Popover with Actions for Solid

An Actions button that opens Edit, Share, and a destructive Delete, each full width, and each one closes the panel.

UI library: Ark UI

Actions opens three full-width buttons: Edit, Share, and Delete. Delete uses the destructive style. Each one closes the panel. The title Actions is hidden and read by screen readers.

Use it for a few actions on one item when a menu would be more chrome than help. Delete should still confirm if it cannot be undone, in an Alert Dialog. In Solid, Ark UI does not run Edit, Share, or Delete.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Popover anatomy: trigger, title, positioner, arrow, description, content

Usage

<Popover>
    <PopoverTrigger asChild={props => <Button {...props()} variant="outline">Actions</Button>} />
    <PopoverContent class="gap-2">
      <PopoverTitle class="sr-only">Actions</PopoverTitle>
      <PopoverClose asChild={props => <Button {...props({
      "class": "w-full"
    })}>Edit</Button>} />
      <PopoverClose asChild={props => <Button {...props({
      "class": "w-full"
    })} variant="outline">
          Share
        </Button>} />
      <PopoverClose asChild={props => <Button {...props({
      "class": "w-full"
    })} variant="destructive">
          Delete
        </Button>} />
    </PopoverContent>
  </Popover>

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 each button sits in PopoverClose, which closes the panel without any state. To close it from your own code, control the open state on Popover. Pass open and onOpenChange on Popover. The callback gets { open }.

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". asChild is a function on PopoverTrigger that returns the button, and PopoverContent is 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.

API Reference

Popover

Sets asChild and props. The rest is on the Popover page.

Button

Sets props, variant="outline", w-full and variant="destructive". The rest is on the Button page.

All 15 popover examples