AnnouncementBar

A full-width banner with a centered icon + message, used for page- or app-level announcements.

When to use

Use AnnouncementBar for a persistent, layout-level notice spanning the full width (site-wide notice, maintenance banner, promo). Its content is centered and width-capped.

• For transient app-wide toasts, use FlashMessages.
• For an in-flow status box with a title, description, and action, use InfoBox.

There is no @uxf/form twin.

Usage

import { AnnouncementBar } from "@uxf/ui/announcement-bar";

<AnnouncementBar color="negative">Announcement...</AnnouncementBar>

// no icon
<AnnouncementBar color="brand" icon={false}>
    Announcement...
</AnnouncementBar>

// custom icon
<AnnouncementBar color="neutral" icon="chevronDown">
    Announcement...
</AnnouncementBar>

Props

AnnouncementBarProps:

Variants & states

color values come from theme.ts (AnnouncementBarColors): brand, info, negative, neutral, positive, warning; each sets the banner background.

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 (AnnouncementBar renders an Icon):

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