yarn add @twilio-paste/popover - or - yarn add @twilio-paste/core
import {Popover, PopoverContainer, PopoverButton} from '@twilio-paste/core/popover';
const PopoverExample: React.FC = () => {
return (
<PopoverContainer baseId="popover-example">
<PopoverButton variant="primary">Open popover</PopoverButton>
<Popover aria-label="Popover">Popover content</Popover>
</PopoverContainer>
);
};
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
state
- Type
PopoverStateReturn
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
aria-label RequiredRequired
Required label for this Popover component. Titles the entire popover context for screen readers.
- Type
string
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'POPOVER'
i18nDismissLabel
Accessible label for the dismiss button in the Popover.
- Type
string- Default
'Close popover'
initialFocusRef
A ref to an interactive element that recieves focus when the Popover opens.
- Type
RefObject<any>
width
- Type
any
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'POPOVER_BUTTON'
id
- Type
string
toggle
- Type
() => void
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'POPOVER_BADGE'
id
- Type
string
toggle
- Type
() => void
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.