TRA SummitDesign System

Popover

A floating panel anchored to a trigger, for lightweight contextual content.

Basic

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Payment details</Button>
  </PopoverTrigger>
  <PopoverContent>
    <p className="text-sm font-medium">June dues</p>
    <p className="mt-1 text-sm text-ink-muted">
      $189.00 drafted June 1 from Visa ending 4242.
    </p>
  </PopoverContent>
</Popover>

Alignment

<PopoverContent align="start">…</PopoverContent>
<PopoverContent align="end">…</PopoverContent>

With close action

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Autopay reminder</Button>
  </PopoverTrigger>
  <PopoverContent>
    <p className="text-sm font-medium">Autopay is on</p>
    <p className="mt-1 text-sm text-ink-muted">
      Membership dues draft automatically on the 1st of each month.
    </p>
    <PopoverClose asChild>
      <Button variant="ghost" size="sm">Dismiss</Button>
    </PopoverClose>
  </PopoverContent>
</Popover>