# @askrjs/ui/popover

> Published API exports for @askrjs/ui/popover.

Source: [https://askrjs.com/docs/reference/api/ui/popover](https://askrjs.com/docs/reference/api/ui/popover)

Status: stable. Packages: @askrjs/ui/popover.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 18 exports from the declarations shipped by @askrjs/ui.

### `Popover`

```ts
Popover: (props: PopoverProps) => JSX.Element
```

Renders a part of `popover`.

### `POPOVER_A11Y_CONTRACT`

```ts
POPOVER_A11Y_CONTRACT: { readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly side: "data-side"; readonly align: "data-align"; }; readonly TRIGGER_ATTRIBUTES: { readonly popup: "aria-haspopup"; readonly expanded: "aria-expanded"; readonly controls: "aria-controls"; }; readonly CONTENT_ATTRIBUTES: { readonly role: "dialog"; readonly labelledBy: "aria-labelledby"; readonly tabIndex: -1; }; readonly DEFAULT_LABELING: { readonly source: "trigger-id"; readonly override: "aria-label or aria-labelledby"; }; readonly FOCUS_RULES: { readonly trapScope: true; readonly restoreFocusOnClose: true; readonly dismissableLayer: true; }; }
```

WAI-ARIA dialog-style popover contract.

### `PopoverA11yContract`

```ts
PopoverA11yContract: typeof POPOVER_A11Y_CONTRACT
```

Type of the Popover A11y Contract object.

### `PopoverClose`

```ts
PopoverClose: { (props: PopoverCloseProps): JSX.Element; (props: PopoverCloseAsChildProps): JSX.Element; }
```

Renders the `popover-close` part of `popover`.

Supports polymorphic rendering via `asChild`.

### `PopoverCloseAsChildProps`

```ts
PopoverCloseAsChildProps: ButtonLikeAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Popover Close.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

### `PopoverCloseProps`

```ts
PopoverCloseProps: ButtonLikeProps<'button', HTMLButtonElement>
```

Props for Popover Close.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `PopoverContent`

```ts
PopoverContent: { (props: PopoverContentProps): JSX.Element | null; (props: PopoverContentAsChildProps): JSX.Element | null; }
```

Renders the `popover-content` part of `popover` with `role="dialog"`.

Supports polymorphic rendering via `asChild`.

### `PopoverContentAsChildProps`

```ts
PopoverContentAsChildProps: BoxAsChildProps & PopoverContentOwnProps
```

Props for the `asChild` (polymorphic) rendering of Popover Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

- `width`: width?: PopoverContentWidth | undefined;

### `PopoverContentOwnProps`

```ts
PopoverContentOwnProps: {
  forceMount?: boolean;
  side?: OverlaySide;
  align?: OverlayAlign;
  sideOffset?: number;
  width?: PopoverContentWidth;
}
```

Own props for Popover Content, before merging with native element attributes.

- `align`: align?: OverlayAlign | undefined;

- `forceMount`: forceMount?: boolean | undefined;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

- `width`: width?: PopoverContentWidth | undefined;

### `PopoverContentProps`

```ts
PopoverContentProps: BoxProps<'div', HTMLDivElement> & PopoverContentOwnProps
```

Props for Popover Content.

- `align`: align?: OverlayAlign | undefined;

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `side`: side?: OverlaySide | undefined;

- `sideOffset`: sideOffset?: number | undefined;

- `width`: width?: PopoverContentWidth | undefined;

### `PopoverContentWidth`

```ts
PopoverContentWidth: 'sm' | 'md' | 'lg'
```

Popover Content Width.

### `PopoverOwnProps`

```ts
PopoverOwnProps: {
  children?: unknown;
  id?: string;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
}
```

Own props for Popover, before merging with native element attributes.

- `children`: children?: unknown;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

### `PopoverPortal`

```ts
PopoverPortal: (props: PopoverPortalProps) => JSX.Element | null
```

Renders a part of `popover`.

### `PopoverPortalProps`

```ts
PopoverPortalProps: {
  children?: unknown;
}
```

Props for Popover Portal.

- `children`: children?: unknown;

### `PopoverProps`

```ts
PopoverProps: PopoverOwnProps
```

Props for Popover.

- `children`: children?: unknown;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `id`: id?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

### `PopoverTrigger`

```ts
PopoverTrigger: { (props: PopoverTriggerProps): JSX.Element; (props: PopoverTriggerAsChildProps): JSX.Element; }
```

Renders the `popover-trigger` part of `popover`.

Supports polymorphic rendering via `asChild`.

### `PopoverTriggerAsChildProps`

```ts
PopoverTriggerAsChildProps: ButtonLikeAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Popover Trigger.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

### `PopoverTriggerProps`

```ts
PopoverTriggerProps: ButtonLikeProps<'button', HTMLButtonElement>
```

Props for Popover Trigger.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/menubar/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/scroll-area/index.md)