Skip to content
Aggarly OS
  • Getting Started
    • Introduction
  • Foundations
    • Colors
    • Spacing
    • Radius
    • Typography
    • Shadows
    • Z-Index
    • Gradients
    • Tokens
    • RTL & Direction
    • Theming
  • Layout
    • Containers
    • Grid System
    • Layout Utilities
  • Components
    • Alerts
    • Avatars
    • Buttons
    • Button Group
    • Badges
    • Inputs
    • Select
    • Checkbox
    • Counters-timers
    • Radio
    • Switch
    • Stepper
    • Select-pro
    • Cards
    • Modals
    • Dropdown
    • Popover
    • Tooltip
    • Accordion
    • Breadcrumb
    • Tabs
    • Navbar
    • List Group
    • Toasts
    • Skeleton
    • Pagination
    • Progress
    • Table
    • Icons
    • Form
    • Ribbons
    • Spinner
    • Offcanvas
    • Feedback
    • Grid
    • Data UI
  • Data UI
    • Overview
  • Platform
    • Reference DataCore
  • Widgets
    • KPI
    • Analytics
    • Behavior
  • Brand
    • Logo
    • Brand Usage
Components/Popover

Popover

Popovers provide contextual content anchored to a trigger (menus, quick actions, summaries, inline forms). They dismiss on the next outside click by default, support Escape-to-close, and can be placed in four directions. Styles are token-driven and consistent across themes.

Default Popover

A premium, enterprise popover with header, content, and footer actions. Dismisses on next outside click (and Escape).

Show code
Default popover (JSX)
import { Popover } from "@/design-system/components/Popover";
import { Button } from "@/design-system/components/Button";

export function Example() {
  return (
    <Popover
      tone="primary"
      title="Student actions"
      content={
        <div className="popover-actions">
          <button type="button" className="popover-action">View profile</button>
          <button type="button" className="popover-action">Add note</button>
          <button type="button" className="popover-action popover-action--danger">Archive</button>
        </div>
      }
      footer={
        <>
          <Button size="sm" variant="ghost">Cancel</Button>
          <Button size="sm" variant="primary">Confirm</Button>
        </>
      }
    >
      <Button size="sm" variant="outline">Open popover</Button>
    </Popover>
  );
}

Four Directions

Top, Right, Bottom, Left placements. Popover uses fixed positioning + portal so it won’t be clipped by containers.

Show code
Popover directions (JSX)
import { Popover } from "@/design-system/components/Popover";
import { Button } from "@/design-system/components/Button";

export function Example() {
  return (
    <div className="popovers-directions">
      <Popover placement="top" title="Top" content="Placed above the trigger.">
        <Button size="sm" variant="outline">Top</Button>
      </Popover>

      <Popover placement="right" title="Right" content="Placed to the right of the trigger.">
        <Button size="sm" variant="outline">Right</Button>
      </Popover>

      <Popover placement="bottom" title="Bottom" content="Placed below the trigger.">
        <Button size="sm" variant="outline">Bottom</Button>
      </Popover>

      <Popover placement="left" title="Left" content="Placed to the left of the trigger.">
        <Button size="sm" variant="outline">Left</Button>
      </Popover>
    </div>
  );
}

Colors (Tones)

Tones provide semantic alignment across Aggarly Platform. Each tone drives the accent line and subtle emphasis.

Show code
Popover tones (JSX)
import { Popover } from "@/design-system/components/Popover";
import { Button } from "@/design-system/components/Button";

export function Example() {
  return (
    <div className="popovers-grid">
      <Popover tone="primary" title="Primary" content="Primary tone popover.">
        <Button size="sm" variant="primary">Primary</Button>
      </Popover>

      <Popover tone="secondary" title="Secondary" content="Secondary tone popover.">
        <Button size="sm" variant="secondary">Secondary</Button>
      </Popover>

      <Popover tone="success" title="Success" content="Success tone popover.">
        <Button size="sm" variant="success">Success</Button>
      </Popover>

      <Popover tone="warning" title="Warning" content="Warning tone popover.">
        <Button size="sm" variant="warning">Warning</Button>
      </Popover>

      <Popover tone="danger" title="Danger" content="Danger tone popover.">
        <Button size="sm" variant="danger">Danger</Button>
      </Popover>

      <Popover tone="neutral" title="Neutral" content="Neutral tone popover.">
        <Button size="sm" variant="neutral">Neutral</Button>
      </Popover>
    </div>
  );
}

Dismiss Behavior (Next Outside Click)

By default, popovers dismiss on the next outside click and Escape. Inside clicks do not dismiss (so you can use inputs/buttons).

Show code
Dismiss behavior (JSX)
import { Popover } from "@/design-system/components/Popover";
import { Button } from "@/design-system/components/Button";
import { Input } from "@/design-system/components/Input";

export function Example() {
  return (
    <Popover
      title="Quick filter"
      content={
        <div className="stack-sm">
          <Input label="Student name" placeholder="Search..." />
          <div className="popovers-row">
            <Button size="sm" variant="outline">Apply</Button>
            <Button size="sm" variant="ghost">Reset</Button>
          </div>
        </div>
      }
      // Default behavior:
      // - Outside click closes
      // - Escape closes
      // Inside clicks do NOT close (so you can interact with inputs)
    >
      <Button size="sm" variant="outline">Open interactive popover</Button>
    </Popover>
  );
}

Premium Variants

Surface (default), Glass, and Neumorphic variants — all token-driven and theme-safe.

Show code
Popover variants (JSX)
import { Popover } from "@/design-system/components/Popover";
import { Button } from "@/design-system/components/Button";

export function Example() {
  return (
    <div className="popovers-row">
      <Popover variant="surface" title="Surface" content="Default elevated surface.">
        <Button size="sm" variant="outline">Surface</Button>
      </Popover>

      <Popover variant="glass" title="Glass" content="Frosted glass style.">
        <Button size="sm" variant="outline">Glass</Button>
      </Popover>

      <Popover variant="neumorphic" title="Neumorphic" content="Soft inner/outer elevation.">
        <Button size="sm" variant="outline">Neumorphic</Button>
      </Popover>
    </div>
  );
}