Installation
Section titled “Installation”- Package
@bigbang/ui- Import
import { Popover } from '@bigbang/ui';- Source
- Popover.tsx
- Storybook
- Popover · Playground
Popover is in the @bigbang/ui package.
import { Button, Popover } from '@bigbang/ui';
<Popover trigger={<Button variant="secondary">Edit view</Button>} title="View"> Content</Popover>;The part prop types are exported too: PopoverCloseProps.
triggerRequired- Description
- The element that opens the popover on press, usually a Button. Required: a popover always belongs to a trigger.
- Type
ReactElement
titleRequired- Description
- Short heading that names the panel for screen readers.
- Type
ReactNode
description- Description
- One sentence under the title; read together with it.
- Type
ReactNode
children- Description
- Interactive content: fields, checkboxes, a short list of actions. Focus moves to its first control on open.
- Type
ReactNode
side- Description
- Side of the trigger where the panel opens;
inline-startandinline-endfollow the text direction. It flips when there is no room. - Type
PopoverSide- Default
'bottom'
align- Description
- Alignment along that side.
- Type
'start' | 'center' | 'end'- Default
'center'
size- Description
- Panel width: 240, 320 or 400 px.
- Type
'sm' | 'md' | 'lg'- Default
'md'
arrow- Description
- Shows an arrow that points at the trigger. Use it when several triggers sit close together.
- Type
boolean- Default
false
modal- Description
- Makes the page inert while the panel is open and traps focus. Leave it off for most popovers; turn it on when the content must be finished before going on.
- Type
boolean- Default
false
open- Description
- Controlled open state. Pass it with
onOpenChange. - Type
boolean
defaultOpen- Description
- Open state on first render when the popover is uncontrolled.
- Type
boolean- Default
false
onOpenChange- Description
- Called with the new open state on trigger press, Escape, outside press or
Popover.Close. - Type
(open: boolean) => void
material- Description
'solid'keeps this panel solid under a glass Provider. Use it when the panel holds dense content, such as a table or a form with more than three fields.- Type
'auto' | 'solid'- Default
'auto'
Popover.Close: wraps one Button and closes the panel when it is pressed.
Data attributes
Section titled “Data attributes”data-component="popover",data-size: on the panel.data-part:header,body,arrow.data-side,data-align,data-open,data-starting-style,data-ending-style: from Base UI.