Skip to content
search icon
clear
Component Status

Figma

How to add

  1. Locate the Assets tab in the Layers Panel.
  2. There are two ways to locate the Popover component needed:
    • Use the search bar to search for a component grouping name or variation name.
  • Scroll through the folders list and open the relevant grouping.
  1. Once the component needed is located, click and drag it into the frame/artboard.

How to use

  1. Select the Popover in the frame/artboard.
  2. Locate and expand the highlighted layer in the Layers Panel.
  3. Toggle off the visibility of the Caret layers that are not needed.
  4. If using text, toggle off the placeholder and edit the text. If the text wraps over one line, add 16px in height per line of text added to the whole component.
  5. If using the placeholder, toggle off the text and replace the placeholder with your custom content.

API

Popover

PropertyTypeRequiredDefaultDescription
placementEnum
'topLeft' │ 'top' │ 'topRight' │ 'rightTop' │ 'right' │ 'rightBottom' │ 'bottomLeft' │ 'bottom' │ 'bottomRight' │ 'leftTop' │ 'left' │ 'leftBottom'
falsebottom
onCloseFuncfalse() => {}
classNameStringfalse[Empty String]@ignore
openBooltrue-
childrenNodetrue-Popover reference/anchor element is required as a child

PopoverAnchor

PropertyTypeRequiredDefaultDescription
childrenNodefalseundefined@ignore
classNameStringfalse[Empty String]@ignore

PopoverTitle

PropertyTypeRequiredDefaultDescription
classNameStringfalse[Empty String]@ignore
childrenStringtrue-Children for PopoverTitle is required (string)

PopoverContent

PropertyTypeRequiredDefaultDescription
classNameStringfalse[Empty String]@ignore
childrenNodetrue-Children in popover content is required
Edit this page on GitHub