Skip to content

/

foundations

Introduction Color Grid Icons Playground

brands

Vercel Next.js Turbo

components Internal

Avatar Badge Button Calendar Capacity Checkbox Collapse Combobox Description Drawer Entity Error Feedback Fieldset File Tree Input Keyboard Input Loading Dots Menu Modal Note Progress Radio Scroller Select Show More Skeleton Snippet Spinner Stack Status Dot Survey Switch Table Tabs Text Textarea Toast Toggle Tooltip Video Window

Popover

Display additional, floating content on click.

Note: Looking to display content on hover? Use the Tooltip component.

Default

Code Editor

Disabled

Code Editor

Color Overlay

Code Editor

Callback

Code Editor

Playground

Explore the different popup positoning options.

anchorOrigin.vertical

topcenterbottom

transformOrigin.vertical

topcenterbottom

anchorOrigin.horizontal

leftcenterright

transformOrigin.horizontal

leftcenterright

Debug Mode

Debug Mode (shows dot, disables click outside behavior)

Code Editor