Alert — uicraft

Default

A basic alert using the default styling.

html

Heads up!

You can add components to your app using the CLI.

<div class="uc-alert">
  <svg class="uc-w-5 uc-h-5 uc-shrink-0 uc-mt-0.5">...</svg>
  <div>
    <h3 class="uc-text-sm uc-font-semibold">Heads up!</h3>
    <p class="uc-text-sm uc-text-fg-disabled uc-mt-1">Alert text.</p>
  </div>
</div>

Variants

Alerts using semantic colors for different contexts.

html

Information

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

Success

Your payment has been processed successfully.

Warning

Your free trial expires in 3 days. Upgrade your plan to continue.

Error

There was a problem with your request. Please try again.

<div class="uc-alert uc-alert-info">...</div>
<div class="uc-alert uc-alert-success">...</div>
<div class="uc-alert uc-alert-warning">...</div>
<div class="uc-alert uc-alert-danger">...</div>

With Description

Alerts with extended descriptions providing more context.

html

Security Update Required

A critical security update is available for your account. Two-factor authentication has been reset due to a recent security incident. Please re-enable it to secure your account.

Sync in Progress

Your data is being synchronized across all devices. This may take a few minutes depending on the amount of data. You can continue working while the sync completes in the background.

<div class="uc-flex uc-gap-3 uc-rounded-2xl uc-border uc-border-border-default uc-p-4">
  <svg class="uc-w-5 uc-h-5 uc-shrink-0 uc-mt-0.5">...</svg>
  <div>
    <h3 class="uc-text-sm uc-font-semibold">Security Update Required</h3>
    <p class="uc-text-sm uc-text-fg-disabled uc-mt-1">A critical security update is available...</p>
  </div>
</div>

With Action Button

Alerts that include an actionable button.

html

Update Available

A new version of the application is ready to install.

Deployment Successful

Your project has been deployed to production.

Payment Failed

Your payment method was declined. Please update your billing information.

<div class="uc-flex uc-gap-3 uc-rounded-2xl uc-border uc-border-border-default uc-p-4">
  <svg class="uc-w-5 uc-h-5 uc-shrink-0 uc-mt-0.5">...</svg>
  <div class="uc-flex-1">
    <h3 class="uc-text-sm uc-font-semibold">Update Available</h3>
    <p class="uc-text-sm uc-text-fg-disabled uc-mt-1">A new version is ready.</p>
    <button class="uc-mt-3 uc-rounded-lg uc-text-xs uc-font-medium uc-h-7 uc-px-3 uc-bg-accents-blue uc-text-constant-white">Update Now</button>
  </div>
</div>

Closable

Alerts with a close button to dismiss them.

html

Tip

You can use keyboard shortcuts to navigate faster.

New Feature

Dark mode is now available! Toggle it from the settings page.

Storage Almost Full

You are using 90% of your storage. Consider upgrading your plan.

Connection Lost

Unable to connect to the server. Check your internet connection and try again.

<div class="uc-flex uc-gap-3 uc-rounded-2xl uc-border uc-border-border-default uc-p-4">
  <svg class="uc-w-5 uc-h-5 uc-shrink-0 uc-mt-0.5">...</svg>
  <div class="uc-flex-1">
    <h3 class="uc-text-sm uc-font-semibold">Tip</h3>
    <p class="uc-text-sm uc-text-fg-disabled uc-mt-1">You can use keyboard shortcuts.</p>
  </div>
  <button class="uc-shrink-0 uc-p-1 uc-rounded-lg">
    <svg class="uc-w-4 uc-h-4"><!-- X icon --></svg>
  </button>
</div>

API Reference

All CSS classes available for the Alert component.

Class	Type	Description
`uc-alert`	Base	Base alert container — flex layout with gap, rounded, border, padding
`uc-tone-info`	Variant	Blue tinted background and border for informational alerts
`uc-tone-success`	Variant	Green tinted background and border for success alerts
`uc-tone-warning`	Variant	Orange tinted background and border for warning alerts
`uc-tone-danger`	Variant	Red tinted background and border for error alerts

Accessibility

Keyboard and screen reader support.

Feature	Details
Role	Use role="alert" for urgent messages that need immediate attention
Closable	Close button should have aria-label="Dismiss" for screen readers
Icons	Decorative icons should have aria-hidden="true", meaning conveyed by text
Focus	When alert appears dynamically, use aria-live="polite" for non-urgent updates