Popover - @ngrok/mantle

Displays rich content in a portal, triggered by a button.

import { Button } from "@ngrok/mantle/button";
import { Popover } from "@ngrok/mantle/popover";

<Popover.Root>
	<Popover.Trigger asChild>
		<Button type="button" appearance="filled">
			Open popover
		</Button>
	</Popover.Trigger>
	<Popover.Content preferredWidth="max-w-96">
		<p>Reprehenderit veniam excepteur incididunt et ut eu.</p>
	</Popover.Content>
</Popover.Root>;

API Reference

The Popover components are built on top of Radix Popover.

Popover.Root

The root, stateful component that manages the open/closed state of the popover.

All props from Radix Popover.Root.

Prop	Type	Default	Description
`defaultOpen?`	`boolean`	`false`	The open state when initially rendered. Use when you do not need to control the state.
`open?`	`boolean`		Controlled open state. Must be used with `onOpenChange`.
`onOpenChange?`	`(open: boolean) => void`		Event handler called when the open state changes.
`modal?`	`boolean`	`false`	The modality of the popover. When `true`, interaction with outside elements is disabled.

Popover.Trigger

The button that toggles the popover.

All props from Radix Popover.Trigger.

Prop	Type	Default	Description
`asChild?`	`boolean`	`false`	Compose onto an alternative element type or your own React component.

Popover.Content

The content to render inside the popover. Appears in a portal with styling and animations.

All props from Radix Popover.Content, plus:

Prop	Type	Default	Description
`preferredWidth?`	`max-w-${string}`	`"max-w-72"`	The preferred width as a Tailwind `max-w-` class.
`side?`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	The preferred side of the trigger to render against.
`sideOffset?`	`number`	`4`	The distance in pixels from the trigger.
`align?`	`"start" \| "center" \| "end"`	`"center"`	The preferred alignment against the trigger.

Popover.Anchor

An optional element to position the Popover.Content against. If not used, the content will position alongside the Popover.Trigger.

All props from Radix Popover.Anchor.

Prop	Type	Default	Description
`asChild?`	`boolean`	`false`	Compose onto an alternative element type or your own React component.

Popover.Close

A button that closes an open popover.

All props from Radix Popover.Close.

Prop	Type	Default	Description
`asChild?`	`boolean`	`false`	Compose onto an alternative element type or your own React component.