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.