Components / Overlays
Status popover
A one-sentence status in a toolbar or header: an icon, or an icon and a word, that opens a popover with what to do about it.
@fabrials/ui
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { StatusPopover } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
title / description | string | The popup's name and the sentence. An icon trigger is named "title: description"; with a label, "title: label". |
icon / label | ReactNode / string | The glyph should change with the state; label adds a visible word. |
attention | boolean | warning | danger | Tints the trigger with a status ink. true is danger. Never the only signal. |
compact / keepMounted | boolean | compact hides the label visually and keeps it in the name; keepMounted keeps the popover in the DOM while closed. |
Behavior
It is a popover, not a modal and not a tooltip: Base UI names the popup by its title and Escape returns focus to the trigger. children is what a person can do about it, usually a button.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.