A floating panel next to its trigger, for a small form or details, closed by Escape or a click outside.

WebStableOverlays

Web only — React, from @krizaka/ui/popover. Stable: its API only changes in a major version.

When to use

For a small, optional task next to what it changes: set a goal, pick a filter, edit a name.
To show details on demand without leaving the page.

When not to use

For a list of actions.Use instead: Dropdown menu
For a short hint on hover or focus.Use instead: Tooltip
For a task that must be finished before going on.Use instead: Dialog

Installation

Install

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Popover } from "@krizaka/ui/popover";

Examples

A small form

A field and two buttons next to their trigger.

import { Button } from "@krizaka/ui/button";
import { Field, Input } from "@krizaka/ui/field";
import { Popover } from "@krizaka/ui/popover";

export default function PopoverForm({ defaultOpen = false }: { defaultOpen?: boolean }) {
  return (
    <Popover.Root defaultOpen={defaultOpen}>
      <Popover.Trigger asChild>
        <Button variant="outline">Set a goal</Button>
      </Popover.Trigger>
      <Popover.Content aria-label="Set a goal" align="center">
        <div className="flex flex-col gap-3">
          <Field.Root>
            <Field.Label htmlFor="goal-amount">Amount</Field.Label>
            <Input id="goal-amount" defaultValue="250" />
          </Field.Root>
          <div className="flex justify-end gap-2">
            <Popover.Close asChild>
              <Button size="sm" variant="ghost">
                Cancel
              </Button>
            </Popover.Close>
            <Button size="sm" variant="primary">
              Save
            </Button>
          </div>
        </div>
      </Popover.Content>
    </Popover.Root>
  );
}

Props

Prop	Type	Default	Description
`container`	`HTMLElement \| null`	—	The element the portal renders into (default: document.body).

Accessibility

Radix Popover: the trigger has aria-expanded and aria-controls; the content is a dialog.
It is not modal: the page stays reachable.

Keyboard

Keys	Action
`Enter / Space`	Opens the popover from its trigger; the focus moves into it.
`Esc`	Closes it and returns the focus to the trigger.

Best practices

Name the content with aria-label (or a heading inside) when the trigger's words are not enough.
Keep it small: if it scrolls, it should be a dialog or a page.
Put the close or cancel action in Popover.Close.

Generated from the code of @krizaka/ui 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub

Popover