DEVELOPMENT PREVIEWIn development

Popover

A composable anchored panel — the general-purpose building block for rich hovers, quick forms and filters. Rendered in a portal with collision-aware positioning; Escape and outside-press dismiss it, and focus returns to the trigger.

Basic

Snippet
import { Popover, PopoverTrigger, PopoverContent } from '@creo-team/buzz-ui/client'

<Popover>
	<PopoverTrigger asChild>
		<Button variant="outline">Open popover</Button>
	</PopoverTrigger>
	<PopoverContent>Anything can live here.</PopoverContent>
</Popover>

With a form

Snippet
<Popover side="bottom" align="start">
	<PopoverTrigger asChild>
		<Button>Edit dimensions</Button>
	</PopoverTrigger>
	<PopoverContent className="w-64">
		<TextInput label="Width" defaultValue="320" />
		<TextInput label="Height" defaultValue="180" />
	</PopoverContent>
</Popover>

Controlled

Drive it from state with open / onOpenChange, or start open with defaultOpen.

Snippet
const [open, setOpen] = useState(false)

<Popover open={open} onOpenChange={setOpen}>
	<PopoverTrigger asChild><Button>Toggle</Button></PopoverTrigger>
	<PopoverContent>Controlled content</PopoverContent>
</Popover>