Design System/Atoms/Popover

Popover

Floating panel anchored to a trigger, for richer content.

When To Use

  • Use Popover when content needs to appear in context without forcing a full page transition.
  • Match the overlay type to the weight of the task: lightweight guidance for hints, stronger containment for focused tasks.
  • Review the examples below to compare trigger styles, content density, and dismissal expectations.

When Not To Use

  • Do not move a full workflow into an overlay if the user needs persistent navigation, rich context, or deep editing space.
  • Do not rely on an overlay for critical messaging when it can be missed, dismissed accidentally, or blocked by focus issues.

Accessibility Notes

  • Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
  • Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
  • Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.

Key Props / API

Key exports

PopoverRoot, PopoverTrigger, PopoverContent, PopoverClose

Example Code

import {
  Popover, PopoverTrigger, PopoverContent,
} from "@hilum/ui"
import { Button } from "@hilum/ui"

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Voice settings</Button>
  </PopoverTrigger>
  <PopoverContent>
    <div className="flex flex-col gap-3">
      <p className="text-xs font-semibold uppercase tracking-widest text-ground-400">
        Stability
      </p>
      <Slider defaultValue={[65]} max={100} step={1} />
      <p className="text-xs font-semibold uppercase tracking-widest text-ground-400 mt-1">
        Similarity
      </p>
// ...trimmed for docs

Popover

Default

Anchored floating panel for inline content