Popover
A Popover is used for displaying additional rich content on top of something.
- Status
- alpha
- Version
- 6.0.0
- Import from
@twilio-paste/core/popover— or —@twilio-paste/popover
Using alpha components in your product
Alpha components are ready for you to use in production. Components such as Popover are likely to not see any API changes. This is only an alpha due to the lack of documentation and a matching Sketch symbol. Feel free to share your experience using this component by starting a discussion on GitHub. We are also looking for a contributor to symbolize this component in Sketch. Interested? Reach out!
Guidelines#
About Popover#
The Popover component is a non-modal dialog that is commonly used for displaying additional rich content above your UI.
Popover compared to Tooltip#
Accessibility#
Popovers and non-modal dialogs follow these accessibility guidelines:
- There must be a focusable element inside the popover.
- There should be a close button so screen readers have a specific close action to target.
- A Popover is a focus trap, and focus is placed inside it when it's shown.
- A Popover must be triggered by an explicit user action, e.g. clicking a button.
Examples#
Basic Popover#
Controlling placement#
The placement of the popover is configurable via the placement prop. The available placement options are
available in the props description here.
Anatomy#
PopoverButton#
See the button component.
Popover#
| Property | Default token | Modifiable? |
|---|---|---|
| background-color | color-background-body | No |
| border-width | border-width-10 | No |
| border-color | color-border-lighter | No |
| border-radius | border-radius-20 | No |
| box-shadow | shadow-card | No |
| max-width | size-30 | No |
| padding | space-50 | No |
| padding-left | space-70 | No |
| padding-right | space-70 | No |
| z-index | z-index-80 | No |
Usage Guide#
API#
Installation#
yarn add @twilio-paste/popover - or - yarn add @twilio-paste/coreUsage#
import {Popover, PopoverContainer, PopoverButton} from '@twilio-paste/popover';const PopoverExample: React.FC = () => { return ( <PopoverContainer baseId="popover-example"> <PopoverButton variant="primary">Open popover</PopoverButton> <Popover aria-label="Popover">Popover content</Popover> </PopoverContainer> );};Props#
Popover Container#
baseId?: string
Sets the ID that will serve as a base for all the items IDs.
gutter?: string
Sets the offset between the reference and the popover on the main axis.
placement?: "auto-start" | "auto" | "auto-end" | "top-start...
Sets the placement of popover in relation to the PopoverButton. Available options include:
- auto-start
- auto-end
- auto
- top-start
- top-end
- top
- bottom-start
- bottom-end
- bottom
- right-start
- right-end
- right
- left-start
- left-end
- left
Popover#
aria-label: string
Required label for this Popover component. Titles the entire popover context for screen readers.