Popover
Popover is used to bring attention to specific user interface elements.
Page navigation navigation
React
readyNot reviewed for a11y
Rails
readyNot reviewed for a11y
Figma
React examples
Default
Popover content
Props
Popover
Name | Required | Description |
---|---|---|
as | string Sets the underlying HTML tag for the component | |
caret | | 'top' | 'bottom' | 'left' | 'right' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top' Controls the position of the caret | |
open | boolean Controls the visibility of the popover. | |
relative | boolean Set to true to render the popover using relative positioning. | |
sx | SystemStyleObject |
Popover.Content
Name | Required | Description |
---|---|---|
as | string Sets the underlying HTML tag for the component | |
sx | SystemStyleObject |