Banner — uicraft

Default

A full-width banner with info styling.

html

<div class="uc-banner uc-tone-info">
  <svg class="uc-w-5 uc-h-5">...</svg>
  <p class="uc-text-sm uc-flex-1">Banner text.</p>
  <button class="uc-shrink-0 uc-p-1 uc-rounded-lg">...</button>
</div>

Variants

Banners in different semantic colors for various contexts.

html

<div class="uc-banner uc-tone-info">
  <svg class="uc-w-5 uc-h-5">...</svg>
  <p class="uc-text-sm uc-flex-1">Info banner text.</p>
</div>

<div class="uc-banner uc-tone-success">
  <svg class="uc-w-5 uc-h-5">...</svg>
  <p class="uc-text-sm uc-flex-1">Success banner text.</p>
</div>

<div class="uc-banner uc-tone-warning">
  <svg class="uc-w-5 uc-h-5">...</svg>
  <p class="uc-text-sm uc-flex-1">Warning banner text.</p>
</div>

<div class="uc-banner uc-tone-danger">
  <svg class="uc-w-5 uc-h-5">...</svg>
  <p class="uc-text-sm uc-flex-1">Danger banner text.</p>
</div>

With Action

Banners with an action button on the right side.

html

<div class="uc-banner uc-tone-warning">
  <svg class="uc-w-5 uc-h-5">...</svg>
  <p class="uc-text-sm uc-flex-1">Your trial expires in 3 days.</p>
  <button class="uc-rounded-lg uc-text-xs uc-font-medium uc-h-7 uc-px-3 uc-border uc-border-current">
    Upgrade Now
  </button>
</div>

With Link

Banners with inline link text for more context.

html

<div class="uc-banner uc-tone-info">
  <svg class="uc-w-5 uc-h-5">...</svg>
  <p class="uc-text-sm uc-flex-1">
    We updated our privacy policy.
    <a href="#" class="uc-underline uc-font-medium">Read more</a>.
  </p>
</div>

Compact

Thinner banners with reduced padding and smaller text.

html

<div class="uc-banner uc-py-2 uc-gap-2 uc-tone-info">
  <svg class="uc-w-4 uc-h-4">...</svg>
  <p class="uc-text-xs uc-flex-1">Compact banner text.</p>
</div>

Dismissible

Banners with a dismiss button to close them.

html

<div id="banner-1" class="uc-banner uc-tone-info">
  <svg class="uc-w-5 uc-h-5">...</svg>
  <p class="uc-text-sm uc-flex-1">Dismissible banner text.</p>
  <button onclick="this.parentElement.style.display='none'" class="uc-shrink-0 uc-p-1 uc-rounded-lg">
    <svg class="uc-w-4 uc-h-4">...</svg>
  </button>
</div>

API Reference

All utility classes available for the Banner component.

Class	Type	Description
`uc-tone-info`	Variant	Blue tinted background and text for informational banners
`uc-tone-success`	Variant	Green tinted background and text for success banners
`uc-tone-warning`	Variant	Yellow/amber tinted background and text for warning banners
`uc-tone-danger`	Variant	Red tinted background and text for error/danger banners
`uc-rounded-lg`	Base	Rounded corners on the banner container
`uc-py-3 uc-px-4`	Base	Default padding for standard banner size
`uc-py-2 uc-px-4`	Size	Compact padding for smaller banner variant
`uc-flex uc-items-center uc-gap-3`	Layout	Horizontal layout with icon, text, and actions
`uc-text-sm`	Base	Default text size for banner message
`uc-text-xs`	Size	Smaller text for compact banners
`uc-flex-1`	Layout	Text fills remaining space between icon and action
`uc-shrink-0`	Layout	Prevents icon and close button from shrinking

Accessibility

Keyboard and screen reader support.

Feature	Details
Role	Use role="banner" for site-wide announcements, role="alert" for urgent messages
Dismissible	Close button should have aria-label="Dismiss banner"
Focus	When banner appears dynamically, manage focus appropriately
Live region	Use aria-live="polite" for non-blocking updates