InfoBox

An inline, in-layout status box with an icon, optional title/description, and an optional action element.

When to use

Use InfoBox to render persistent contextual feedback inside the page layout (a validation summary, a hint, a warning above a form). It is a controlled, presentational primitive — you render it where you want it.

• For transient app-wide toasts, use FlashMessages.
• For a full-width page banner, use AnnouncementBar.

There is no @uxf/form twin.

Usage

import { Button } from "@uxf/ui/button";
import { InfoBox } from "@uxf/ui/info-box";

<InfoBox
    actionElement={
        <Button color="negative" variant="secondary">
            Button
        </Button>
    }
    color="negative"
    description="Description."
    title="Title"
/>;

Props

InfoboxProps:

When either title or description is missing, the box switches to a vertically centered layout.

Variants & states

color values come from theme.ts (InfoBoxColors): brand, info, negative, neutral, positive, warning. Each sets its own surface, border, and icon colors.

The default icon depends on color: negative → solid-octagon-xmark, positive → solid-badge-check, warning → solid-triangle-exclamation, and brand/info/neutral → solid-circle-info.

Requirements

Import the component stylesheets once in your global CSS (InfoBox renders an Icon):

@import url("@uxf/ui/css/info-box.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.

Links

• Figma