C
Storybook
18Shipped

Popover

Floating panel for tasks and onboarding nudges. Includes PopoverMessage.

Import

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverMessage,
} from "@charply/design"

Variants

Onboarding nudge

Guidelines

docs/design/components/popover.md

Do

  • ✓Use `PopoverMessage` for first-run education and feature discovery
  • ✓Keep copy short — popup width is limited
  • ✓Close popover on primary action when the nudge is dismissed

Don't

  • ✗Use popover for critical errors — use `Callout` or `Dialog`
  • ✗Put primary navigation inside popovers
  • ✗Nest popovers
  • ✗---

See all variants and interactive states in Storybook. Run npm run storybook to open the workbench.