Banner — uicraft

Default

A full-width banner with info styling.

html

A new software update is available. See what's new in version 3.0.

<div class="uc-w-full uc-rounded-lg uc-py-3 uc-px-4 uc-flex uc-items-center uc-gap-3 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

A new software update is available. See what's new in version 3.0.

Your account has been successfully verified.

Your storage is almost full. Please upgrade your plan.

Payment failed. Please check your billing details and try again.

<div class="uc-rounded-lg uc-py-3 uc-px-4 uc-flex uc-items-center uc-gap-3 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-rounded-lg uc-py-3 uc-px-4 uc-flex uc-items-center uc-gap-3 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-rounded-lg uc-py-3 uc-px-4 uc-flex uc-items-center uc-gap-3 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-rounded-lg uc-py-3 uc-px-4 uc-flex uc-items-center uc-gap-3 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

Your trial expires in 3 days.

A new version of the app is available.

<div class="uc-rounded-lg uc-py-3 uc-px-4 uc-flex uc-items-center uc-gap-3 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

We've updated our privacy policy. Read more.

Your email has been confirmed. Go to dashboard.

<div class="uc-rounded-lg uc-py-3 uc-px-4 uc-flex uc-items-center uc-gap-3 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

Maintenance scheduled for tonight at 11 PM UTC.

All systems operational.

API rate limit is at 80%.

Service outage detected in EU region.

<div class="uc-rounded-lg uc-py-2 uc-px-4 uc-flex uc-items-center 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-rounded-lg uc-py-3 uc-px-4 uc-flex uc-items-center uc-gap-3 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