Rich Popover
betaA popover card for an inline reference — heading or link, description, a meta chip and one call to action.
- Overlays
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add rich-popovernpm packages installed: class-variance-authority.
import { RichPopover } from "@/components/ui/rich-popover";Default
Gallery
<RichPopover>
| Prop | Type | Default |
|---|---|---|
heading (required)The card's heading, which also names it. | ReactNode | — |
trigger (required)The element that opens it. Must accept a ref — a button, or an inline span with a role. | ReactElement | — |
actionHrefMakes the action a link, opened in a new tab. | string | — |
actionIconThe action's icon. A play glyph by default. | ReactNode | <PlayIcon /> |
actionLabelThe call to action's label. Without it there is no action. | ReactNode | — |
defaultOpen | boolean | — |
description | ReactNode | — |
headingHrefMakes the heading a link, opened in a new tab. | string | — |
iconA leading mark beside the heading (a logo, a type icon). Decorative. | ReactNode | — |
metaA small chip — a duration, a date. | ReactNode | — |
onActionClick | () => void | — |
onOpenChange | (open: boolean) => void | — |
open | boolean | — |
tone | "default" | "inverted" | "default" |
Built on Dowel's Popover: the content is a role="dialog" labelled by its heading, opens from pointer or keyboard, closes on Escape or an outside press and returns focus to the trigger. The trigger must be a focusable element with an accessible name (an icon-only trigger needs aria-label). Links open in a new tab with rel=noopener; the leading icon, chip icon and arrow are decorative. The blur-in stops under reduced motion.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes