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

WebStableSuperpositions

Web uniquement — React, depuis @krizaka/ui/popover. Stable : son API ne change qu’à une version majeure.

Quand l’utiliser

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.

Quand ne pas l’utiliser

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

Installation

Installer

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

Styles

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

Importer

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

Exemples

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	Défaut	Description
`container`	`HTMLElement \| null`	—	The element the portal renders into (default: document.body).

Accessibilité

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

Clavier

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

Bonnes pratiques

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.

Générée depuis le code de @krizaka/ui 2.0.0-beta.6 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Popover