Popovers
uiCategories.overlaysModals.components.showcases.popovers.description
Installation
Import
Usage
uiCategories.overlaysModals.components.showcases.popovers.usage
Design Guidelines
uiCategories.overlaysModals.components.showcases.popovers.designGuidelines
uiCategories.overlaysModals.components.showcases.popovers.examples.basicUsage.title
uiCategories.overlaysModals.components.showcases.popovers.examples.basicUsage.description
uiCategories.overlaysModals.components.showcases.popovers.examples.positioning.title
uiCategories.overlaysModals.components.showcases.popovers.examples.positioning.description
uiCategories.overlaysModals.components.showcases.popovers.examples.withArrow.title
uiCategories.overlaysModals.components.showcases.popovers.examples.withArrow.description
uiCategories.overlaysModals.components.showcases.popovers.examples.formInPopover.title
uiCategories.overlaysModals.components.showcases.popovers.examples.formInPopover.description
uiCategories.overlaysModals.components.showcases.popovers.examples.composedPopover.title
uiCategories.overlaysModals.components.showcases.popovers.examples.composedPopover.description
uiCategories.overlaysModals.components.showcases.popovers.examples.controlledPopover.title
uiCategories.overlaysModals.components.showcases.popovers.examples.controlledPopover.description
Popover
uiCategories.overlaysModals.components.showcases.popovers.composedComponents.popover.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
open | boolean | — | uiCategories.overlaysModals.components.showcases.popovers.composedComponents.popover.props.open.description |
defaultOpen | boolean | — | uiCategories.overlaysModals.components.showcases.popovers.composedComponents.popover.props.defaultOpen.description |
onOpenChange | (open: boolean) => void | — | uiCategories.overlaysModals.components.showcases.popovers.composedComponents.popover.props.onOpenChange.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
PopoverTrigger
uiCategories.overlaysModals.components.showcases.popovers.composedComponents.popoverTrigger.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
tooltip | string | React.ComponentProps<typeof TooltipContent> | — | uiCategories.overlaysModals.components.showcases.popovers.composedComponents.popoverTrigger.props.tooltip.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
className | string | — | packages.commonProps.className.description |
PopoverContent
uiCategories.overlaysModals.components.showcases.popovers.composedComponents.popoverContent.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "bottom" | uiCategories.overlaysModals.components.showcases.popovers.composedComponents.popoverContent.props.side.description |
align | "start" | "center" | "end" | "center" | uiCategories.overlaysModals.components.showcases.popovers.composedComponents.popoverContent.props.align.description |
sideOffset | number | 4 | uiCategories.overlaysModals.components.showcases.popovers.composedComponents.popoverContent.props.sideOffset.description |
arrow | boolean | true | uiCategories.overlaysModals.components.showcases.popovers.composedComponents.popoverContent.props.arrow.description |
children | React.ReactNode | — | uiCategories.overlaysModals.components.showcases.popovers.composedComponents.popoverContent.props.children.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
PopoverArrow
uiCategories.overlaysModals.components.showcases.popovers.composedComponents.popoverArrow.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
height | number | 8 | uiCategories.overlaysModals.components.showcases.popovers.composedComponents.popoverArrow.props.height.description |
width | number | 16 | uiCategories.overlaysModals.components.showcases.popovers.composedComponents.popoverArrow.props.width.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
ComposedPopover
uiCategories.overlaysModals.components.showcases.popovers.composedComponents.composedPopover.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
Trigger | React.ComponentType | — | uiCategories.overlaysModals.components.showcases.popovers.composedComponents.composedPopover.props.Trigger.description |
TriggerProps | object | — | uiCategories.overlaysModals.components.showcases.popovers.composedComponents.composedPopover.props.TriggerProps.description |
children | React.ReactNode | — | uiCategories.overlaysModals.components.showcases.popovers.composedComponents.composedPopover.props.children.description |
contentProps | PopoverContentProps | — | uiCategories.overlaysModals.components.showcases.popovers.composedComponents.composedPopover.props.contentProps.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
Accessibility
Accessibility features and considerations
uiCategories.overlaysModals.components.showcases.popovers.accessibility