Site settings
Change the appearance of the site to suit your preferences
Popover
Popovers are used to show detailed information inside a pop-up.
A simple popover
() => { return ( <Popover> <PopoverTrigger> <Button variant="primary">Click me</Button> </PopoverTrigger> <PopoverContent>This is the content of the popover</PopoverContent> </Popover> ); };
A closable popover
() => { return ( <Popover> <PopoverTrigger> <Button variant="primary">Click me</Button> </PopoverTrigger> <PopoverContent showCloseButton> This popover can be closed with a close button </PopoverContent> </Popover> ); };
Positioning and placement of popover. Defaults to "bottom".
() => { return ( <Flex gap="2"> {["top", "right", "bottom", "left"].map((placement) => ( <Popover key={placement} positioning={{ placement, }} > <PopoverTrigger> <Button variant="primary">{placement}</Button> </PopoverTrigger> <PopoverContent>This is the content of the popover</PopoverContent> </Popover> ))} </Flex> ); };
Sizes of popover. Defaults to "sm"
() => { return ( <Flex gap="2"> {["sm", "md", "lg"].map((size) => ( <Popover key={size} size={size}> <PopoverTrigger> <Button variant="primary">{size}</Button> </PopoverTrigger> <PopoverContent> You can use different popover sizes for varying content, but keep in mind that popovers are not ideal for displaying large amounts of content. </PopoverContent> </Popover> ))} </Flex> ); };
A controllable popover
() => { const [isOpen, setIsOpen] = React.useState(false); return ( <Stack gap="2"> <Button variant="secondary" onClick={() => setIsOpen(!isOpen)}> Open popover from outside </Button> {`The popover is ${isOpen ? "open" : "closed"}`} <Popover onOpenChange={(details) => setIsOpen(details.open)} open={isOpen} > <PopoverTrigger> <Button variant="primary">Click me</Button> </PopoverTrigger> <PopoverContent showCloseButton> This popover can be closed with a close button </PopoverContent> </Popover> </Stack> ); };