Pop Over

The Pop Over component displays floating contextual content when a trigger element is clicked.

Usage & Examples

Default

default.tsx

  <PopOver
    asChild
    trigger={<Button size="small">Toggle Popover</Button>}
    content={
        "This is some helpful info shown in a popover."
    }
  />

Visual variants

Themes

primary
secondary
tertiary
quaternary

States

success
warning
error
info

Variants

solid
outline
glass

Rounding

none
medium
large

Shadows

none
light
strong
visual-variants.tsx
// Themes

  <PopOver theme="primary"
    asChild
    trigger={<Button size="small">Toggle Popover</Button>}
    content={
        "This is some helpful info shown in a popover."
    }
  />

  <PopOver theme="secondary"
    asChild
    trigger={<Button size="small">Toggle Popover</Button>}
    content={
        "This is some helpful info shown in a popover."
    }
  />

  <PopOver theme="tertiary"
    asChild
    trigger={<Button size="small">Toggle Popover</Button>}
    content={
        "This is some helpful info shown in a popover."
    }
  />

  <PopOver theme="quaternary"
    asChild
    trigger={<Button size="small">Toggle Popover</Button>}
    content={
        "This is some helpful info shown in a popover."
    }
  />

// States

  <PopOver state="success"
    asChild
    trigger={<Button size="small">Toggle Popover</Button>}
    content={
        "This is some helpful info shown in a popover."
    }
  />

  <PopOver state="warning"
    asChild
    trigger={<Button size="small">Toggle Popover</Button>}
    content={
        "This is some helpful info shown in a popover."
    }
  />

  <PopOver state="error"
    asChild
    trigger={<Button size="small">Toggle Popover</Button>}
    content={
        "This is some helpful info shown in a popover."
    }
  />

  <PopOver state="info"
    asChild
    trigger={<Button size="small">Toggle Popover</Button>}
    content={
        "This is some helpful info shown in a popover."
    }
  />

// Variants

  <PopOver variant="solid"
    asChild
    trigger={<Button size="small">Toggle Popover</Button>}
    content={
        "This is some helpful info shown in a popover."
    }
  />

  <PopOver variant="outline"
    asChild
    trigger={<Button size="small">Toggle Popover</Button>}
    content={
        "This is some helpful info shown in a popover."
    }
  />

  <PopOver variant="glass"
    asChild
    trigger={<Button size="small">Toggle Popover</Button>}
    content={
        "This is some helpful info shown in a popover."
    }
  />

// Rounding

  <PopOver rounding="none"
    asChild
    trigger={<Button size="small">Toggle Popover</Button>}
    content={
        "This is some helpful info shown in a popover."
    }
  />

  <PopOver rounding="medium"
    asChild
    trigger={<Button size="small">Toggle Popover</Button>}
    content={
        "This is some helpful info shown in a popover."
    }
  />

  <PopOver rounding="large"
    asChild
    trigger={<Button size="small">Toggle Popover</Button>}
    content={
        "This is some helpful info shown in a popover."
    }
  />

// Shadows

  <PopOver shadow="none"
    asChild
    trigger={<Button size="small">Toggle Popover</Button>}
    content={
        "This is some helpful info shown in a popover."
    }
  />

  <PopOver shadow="light"
    asChild
    trigger={<Button size="small">Toggle Popover</Button>}
    content={
        "This is some helpful info shown in a popover."
    }
  />

  <PopOver shadow="strong"
    asChild
    trigger={<Button size="small">Toggle Popover</Button>}
    content={
        "This is some helpful info shown in a popover."
    }
  />

Interaction states

Disabled
interaction-states.tsx
// Disabled

  <PopOver disabled
    asChild
    trigger={<Button size="small">Toggle Popover</Button>}
    content={
        "This is some helpful info shown in a popover."
    }
  />

Props API

21 props
Columns
Pop Over props API
Default
Description
aria-describedbystringNoaria—Associates the popover content with an external description element ID.
aria-labelstringNoaria—Accessible label for the popover content region.
aria-labelledbystringNoaria—Associates the popover content with an external label element ID.
aria-modalbooleanNoaria—Whether the popover should be announced as modal when role is dialog.
asChildbooleanNopropsfalseWhen true, the popover will clone the provided trigger element and attach popover behavior directly to it instead of wrapping it in an internal button.
classNamestringNostyling—Optional additional class name(s) for custom styling.
contentReactNodeYesprops—Content to be displayed inside the popover.
contentClassNamestringNoprops—Optional additional class name(s) for the popover content element.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
disabledbooleanNopropsfalseDisables interaction with the trigger and popover.
idstringNoprops—Optional ID for the popover content element.
placement"left" | "right" | "top" | "bottom"Noprops"bottom"Placement of the popover relative to the trigger element. One of: "top" | "bottom" | "left" | "right"