overlays

Popover

A button that opens a small panel with any content, such as a short form.

Native behaviorUses built-in HTML behavior, so you write no script.

Usage

The button opens the panel with popovertarget. Buttons inside close it with popovertargetaction="hide".

<div class="ca-popover">
  <button class="ca-button ca-button--outline ca-button--md" type="button" popovertarget="share-lesson">Share lesson</button>
  <div class="ca-popover__panel" id="share-lesson" popover aria-labelledby="share-lesson-title">
    <p class="font-semibold" id="share-lesson-title">Share this lesson</p>
    <div class="ca-field">
      <label class="ca-field__label" for="share-email">Email address</label>
      <input class="ca-input ca-input--md" id="share-email" type="email" autocomplete="email" />
    </div>
    <div class="flex gap-2">
      <button class="ca-button ca-button--primary ca-button--sm" type="button" popovertarget="share-lesson" popovertargetaction="hide">Send invite</button>
      <button class="ca-button ca-button--ghost ca-button--sm" type="button" popovertarget="share-lesson" popovertargetaction="hide">Cancel</button>
    </div>
  </div>
</div>

Examples

Guidance and accessibility

When to use

Use a popover for a small task that belongs to one button, such as sharing a lesson or setting a filter.
For a list of actions or links, use a dropdown. For a decision that must be made before going on, use a dialog.
Keep the content short; a long form belongs on its own page or in a dialog.

Accessibility

It is a native popover: Escape and a click outside close it, and focus returns to the button. Tab moves from the button into the panel.
Name the panel with aria-labelledby pointing at its heading.
Put the actions that finish the task in the panel and close it with popovertargetaction="hide".
Like the dropdown, it uses CSS anchor positioning and shows centered in browsers without it.

Classes

Generated from the component contract. Parts use __, modifiers use --.

Classes of the popover component
Class	Kind	Use it for
`ca-popover`	Component	Wrapper around the trigger and its panel.
`ca-popover__panel`	Part	The `[popover]` panel; sits under the button and flips when there is no room.

Skins

The same markup, dressed by each skin. Structure and behavior stay the same; only the look changes.

Base skin

Neutral grayscale starting point; product skins extend it and change what differs.

Calaca skin

The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.

Proof skin

Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.

Crossview skin

The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.

Framework notes

Link the prebuilt stylesheet of your skin next to your brand theme. No build step.

<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="ca-base.css" />

In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your theme in your main stylesheet.

@import "tailwindcss";
@import "./theme.css";
@import "@calaca/ui/core.css";
@import "@calaca/ui/skins/base.css";

Same stylesheet as above; write the classes in className.

<button className="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>

Search

Documentation