Popover

Anchored panel with title and actions.

Installation

npx @noarka/cli add popover

Usage

tsx

import { Button, Popover, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "@noarka/ui";

tsx

<Popover>  <PopoverTrigger render={<Button variant="outline">Dimensions</Button>} />  <PopoverContent>    <PopoverTitle>Size guide</PopoverTitle>    <PopoverDescription>Runs small. Order one size up.</PopoverDescription>  </PopoverContent></Popover>

Examples

With actions

Close and confirm controls in a footer band.

Side placement

Dock the panel to any trigger edge.

With input

Collect a value without leaving the page.

API reference

Popover

Prop	Type	Default
`open` Controlled open state. Use with onOpenChange.	`boolean`	`-`
`defaultOpen` Initially open when uncontrolled.	`boolean`	`false`
`onOpenChange` Called when the popover opens or closes.	`(open: boolean) => void`	`-`
`onOpenChangeComplete` Called after open or close animations finish.	`(open: boolean) => void`	`-`
`modal` Limit interaction to the popover while open.	`boolean \| 'trap-focus'`	`-`

PopoverContent

Prop	Type	Default
`side` Preferred placement side.	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`
`sideOffset` Gap between trigger and panel.	`number`	`4`
`align` Alignment against the trigger edge.	`"start" \| "center" \| "end"`	`"center"`
`alignOffset` Offset along the alignment axis.	`number`	`0`
`render` Polymorphic render prop. Use to render a custom element instead of the default panel.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default panel styles.	`string`	`-`

PopoverTrigger

Prop	Type	Default
`render` Render a custom trigger element, e.g. render={<Button>Open popover</Button>}.	`ReactElement \| ((props) => ReactNode)`	`-`
`disabled` Disable the trigger.	`boolean`	`false`

PopoverClose

Prop	Type	Default
`render` Render a custom close control. Must live inside the popover.	`ReactElement \| ((props) => ReactNode)`	`-`

PopoverTitle

Prop	Type	Default
`className` Additional classes merged with the title styles.	`string`	`-`

PopoverDescription

Prop	Type	Default
`className` Additional classes merged with the muted description styles.	`string`	`-`

PopoverFooter

Prop	Type	Default
`footer` Show the muted footer band with a top border. Without it the footer is plain.	`boolean`	`false`
`className` Additional classes merged with the default footer styles.	`string`	`-`