Popover

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

Usage

import { Button } from "@/components/ui/button";
import { Popover } from "@/components/ui/popover";

export default function Example() {
  return (
    <Popover label="Share" trigger={<Button variant="secondary">Share</Button>}>
      <p>Anyone with the link can view this page.</p>
    </Popover>
  );
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

<html data-theme="graphite" data-mode="light">

HTML

The markup the example above renders, at rest. The interaction lives in the React component; from another framework, set the attributes below as the state changes.

<button class="ml-button" type="button" data-variant="secondary" data-size="md" aria-haspopup="dialog" aria-expanded="false"><span class="ml-button-label">Share</span></button>

Options

Every prop with a fixed set of values, read from the exported TypeScript types with its doc comment. Open the Code tab above for the rest of the API.

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

Accessibility and theming

• Semantic elements, accessible names and state relationships are part of the contract.
• Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
• Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
• Reduced motion and forced colors keep meaning and operation.

Dependencies

Installed alongside this component. No third-party UI runtime is ever added.

• @mlola-ui/behavior