Popover

Popover component for displaying rich content in a floating panel. Follows dropdown-menu styling with rounded corners, elevation shadows, and consistent spacing.

Credits Balance Popover

Display credits balance with recent transaction history

Props:
{ align: "end", sideOffset: 4 }

Basic Popover

Simple popover with content

Props:
{ align: "center" }

Popover with Actions

Popover containing actionable items

Props:
{ align: "start" }

Notification Popover

Popover for displaying notifications

Props:
{ align: "end" }

Usage Guidelines

  • •Popover uses the same styling as dropdown-menu: rounded corners rounded-[18px], background var(--color-surface-200)
  • •Use padding p-1.5 for the content container
  • •Item rows should have height h-8 (32px) with px-[10px] padding
  • •Interactive items use rounded-[12px] with hover background var(--color-surface-300)
  • •Separators use color-mix(in srgb, var(--color-font-primary) 6%, transparent)
  • •Labels use text-small-bold text-[var(--color-font-tertiary)]
  • •Shadow elevation: var(--elevation-300)
  • •Icons use size 20px with gap-3 spacing from text
  • •When combining with Tooltip, set open={isPopoverOpen ? false : undefined} to hide tooltip when popover opens

Code Example

<Popover open={isOpen} onOpenChange={setIsOpen}>
  <PopoverTrigger asChild>
    <DesignButton variant="tertiary">
      Trigger
    </DesignButton>
  </PopoverTrigger>
  <PopoverContent
    className="w-72 p-1.5 bg-[var(--color-surface-200)] rounded-[18px] border-0"
    align="end"
    sideOffset={4}
    style={{ boxShadow: "var(--elevation-300)" }}
  >
    {/* Label */}
    <div className="px-[10px] py-1.5 text-small-bold text-[var(--color-font-tertiary)]">
      Section Label
    </div>

    {/* Items */}
    <button className="w-full flex items-center gap-3 h-8 px-[10px] rounded-[12px] hover:bg-[var(--color-surface-300)]">
      <DesignIcon name="icon-name" size={20} />
      <span>Item Label</span>
    </button>

    {/* Separator */}
    <div className="py-1.5">
      <div className="h-px w-full" style={{
        backgroundColor: "color-mix(in srgb, var(--color-font-primary) 6%, transparent)"
      }} />
    </div>
  </PopoverContent>
</Popover>