Popover

Popover is used to display floating content in relation to a trigger, usually a button or link.

Usage
Code
Interactions

Appearance


Light

Dark

Properties

PropertyValue(s)Default value
Position
  • Top
  • Right
  • Bottom
  • Left
  • Top start
  • Top end
  • Bottom start
  • Bottom end
  • Bottom
    Appearance
  • Light
  • Dark
  • Light
    Corner radius4px-
    ShadowShadow 30-

    Usage


    Positioning of Popover

    Popovers appear either 8px above or 8px below their trigger.

    The preferred and default side is the bottom. Popovers use smart positioning if there is not enough space in the designated direction.

    Positioning of popover

    Popover as tooltip


    Popover as tooltip

    Popover as a floating component


    Popover as a floating component

    Popover with actions

    Popover with inputs

    Popover as a dropdown


    Popover as a dropdown

    Popover as a menu


    Popover as a menu