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:

Prop	Type	Default	Description
`color`	`InfoBoxColor`	`"warning"`	Color scheme (`brand`, `info`, `negative`, `neutral`, `positive`, `warning`).
`title`	`ReactNode`	—	Bold heading.
`description`	`ReactNode`	—	Body content.
`icon`	`IconName \| false`	per `color`	Leading icon. Pass `false` to hide it.
`titleElement`	`"p" \| "h1" \| "h2" \| "h3" \| "h4"`	`"p"`	Element used to render the title.
`actionElement`	`ReactNode`	—	Trailing action (e.g. a button), pushed to the right edge.
`className`	`string`	—	Merged onto the root element.

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

Default

Open in new tab

When to use

For transient app-wide toasts, use FlashMessages.

For a full-width page banner, use AnnouncementBar.

There is no @uxf/form twin.

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:

Prop

Type

Default

Description

color

InfoBoxColor

"warning"

Color scheme (brand, info, negative, neutral, positive, warning).

title

ReactNode

—

Bold heading.

description

ReactNode

—

Body content.

icon

IconName | false

per color

Leading icon. Pass false to hide it.

titleElement

"p" | "h1" | "h2" | "h3" | "h4"

"p"

Element used to render the title.

actionElement

ReactNode

—

Trailing action (e.g. a button), pushed to the right edge.

className

string

—

Merged onto the root element.

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.