Gooey Popover
betaA round trigger whose popover pours out of it, melted together by an SVG goo filter.
- Overlays
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add gooey-popovernpm packages installed: class-variance-authority.
import { GooeyPopover } from "@/components/ui/gooey-popover";Default
Gallery
<GooeyPopover>
| Prop | Type | Default |
|---|---|---|
triggerLabel (required)The trigger's accessible name — it is icon-only. Also names the content by default. | string | — |
children (required)The popover's content. | ReactNode | — |
contentWidthThe content's width. Numbers are pixels. | number | string | 240 |
defaultOpen | boolean | false |
durationLength of the morph in milliseconds; the rest of the sequence scales with it. | number | 250 |
onOpenChange | (open: boolean) => void | — |
open | boolean | — |
tone | "inverted" | "primary" | "card" | "inverted" |
triggerThe trigger's icon. A plus by default. | ReactNode | PLUS |
triggerClassNameClasses for the trigger button. | string | — |
triggerSizeThe trigger's diameter in pixels. | number | 44 |
Built on Dowel's Popover (Radix): the icon-only trigger is named by `triggerLabel` and exposes aria-expanded; the content is a role="dialog" named by `triggerLabel` unless given aria-label or aria-labelledby. Opens from pointer or keyboard, moves focus into the content, closes on Escape or an outside press, and returns focus to the trigger. The blob, goo layer and the copy of the trigger icon drawn over it are aria-hidden and ignore the pointer. Under reduced motion the goo layer is dropped and the panel appears in place.
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