A small circular badge containing a status icon. Used on its own for compact status marks and internally by Message.
Use AlertBubble when you need just the colored icon disc — next to a heading, in a list item, or as a status glyph. For a full status block with text and actions, use InfoBox.
There is no @uxf/form twin.
import { AlertBubble } from "@uxf/ui/alert-bubble";
<AlertBubble color="success" size="lg" />
<AlertBubble color="error" />
AlertBubbleProps:
| Prop | Type | Default | Description |
|---|---|---|---|
color | AlertBubbleColor | "default" | Color scheme (default, success, error, warning). |
size | AlertBubbleSize | "default" | Bubble size. |
icon | IconName | per color | Icon to render. Overrides the color-based default. |
className | string | — | Merged onto the root element. |
From theme.ts:
| Group | Values |
|---|---|
color | default, success, error, warning |
size | xs, sm, default, lg, xl, 2xl |
The default icon depends on color: default/warning → triangle-exclamation, error → xmark, success → check.
Import the component stylesheets once in your global CSS (AlertBubble renders an Icon):
@import url("@uxf/ui/css/alert-bubble.css");
@import url("@uxf/ui/css/icon.css");
Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.