Alert Banners
Dismissible, icon, action and stacked alert banners.
Dismissible Alert Banner
Heads up! We've updated our privacy policy. Learn more
<div class="uk-ab-dismiss">
<i class="fas fa-bell"></i>
<div class="uk-ab-body">
<strong>Heads up!</strong> We've updated our privacy policy. <a href="#">Learn more</a>
</div>
<button class="uk-ab-close"><i class="fas fa-times"></i></button>
</div>
<style>
.uk-ab-dismiss {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 1.25rem;
background: #eef2f8;
border: 1px solid #dbeafe;
border-radius: 0.75rem;
color: #1e3a8a;
font-size: 0.85rem;
}
.uk-ab-body { flex: 1; text-align: left; }
.uk-ab-body a { color: #1e3a8a; font-weight: 700; text-decoration: underline; }
.uk-ab-close {
background: transparent;
border: 0;
color: inherit;
opacity: 0.6;
cursor: pointer;
padding: 4px;
border-radius: 4px;
font-size: 0.85rem;
}
.uk-ab-close:hover { opacity: 1; background: rgba(30,58,138,0.1); }
</style>
Banner with Action Button
Your trial ends in 3 days
Upgrade now to keep all your data and premium features.
<div class="uk-ab-action">
<div class="uk-ab-icon"><i class="fas fa-rocket"></i></div>
<div class="uk-ab-body">
<div class="uk-ab-title">Your trial ends in 3 days</div>
<div class="uk-ab-desc">Upgrade now to keep your data.</div>
</div>
<button class="uk-ab-btn">Upgrade</button>
</div>
<style>
.uk-ab-action {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
}
.uk-ab-icon {
width: 44px; height: 44px;
border-radius: 0.65rem;
background: #eef2f8;
color: #1e3a8a;
display: flex; align-items: center; justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.uk-ab-body { flex: 1; }
.uk-ab-title {
font-size: 0.88rem;
font-weight: 700;
color: #0b1b2f;
}
.uk-ab-desc {
font-size: 0.78rem;
color: #64748b;
margin-top: 2px;
}
.uk-ab-btn {
padding: 0.5rem 1.15rem;
background: #1e3a8a;
color: #fff;
border: 0;
border-radius: 0.5rem;
font-weight: 700;
font-size: 0.8rem;
cursor: pointer;
flex-shrink: 0;
}
.uk-ab-btn:hover { background: #0f2a5c; }
</style>
Stacked Alerts
Your changes have been saved.
Storage is almost full. Consider upgrading.
Payment failed. Please update your card.
<div class="uk-ab-stack success">
<i class="fas fa-check-circle"></i>
<div>Your changes have been saved.</div>
</div>
<div class="uk-ab-stack warning">
<i class="fas fa-exclamation-triangle"></i>
<div>Storage is almost full.</div>
</div>
<div class="uk-ab-stack danger">
<i class="fas fa-times-circle"></i>
<div>Payment failed.</div>
</div>
<style>
.uk-ab-stack {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.75rem 1rem;
border-radius: 0.65rem;
font-size: 0.83rem;
border: 1px solid;
text-align: left;
}
.uk-ab-stack i { font-size: 0.95rem; flex-shrink: 0; }
.uk-ab-stack.success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.uk-ab-stack.warning { background: #fef3c7; border-color: #fcd34d; color: #78350f; }
.uk-ab-stack.danger { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
</style>
Full-Width Announcement Bar
<div class="uk-ab-full">
<div class="uk-ab-full-inner">
<i class="fas fa-sparkles"></i>
<span>New: Dark mode is now available.</span>
<a href="#">Try it now →</a>
</div>
</div>
<style>
.uk-ab-full {
background: linear-gradient(90deg, #1e3a8a 0%, #6366f1 50%, #a855f7 100%);
color: #fff;
padding: 0.7rem 1.25rem;
}
.uk-ab-full-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
font-size: 0.85rem;
flex-wrap: wrap;
}
.uk-ab-full a {
background: #fff;
color: #1e3a8a;
font-weight: 700;
font-size: 0.75rem;
padding: 4px 12px;
border-radius: 999px;
text-decoration: none;
}
</style>
Bordered Left-Accent Alert
Payment method required
Add a credit card to activate your account.
<div class="uk-ab-border">
<div class="uk-ab-border-icon"><i class="fas fa-info-circle"></i></div>
<div class="uk-ab-border-body">
<div class="uk-ab-border-title">Payment method required</div>
<div class="uk-ab-border-desc">Add a credit card to activate.</div>
</div>
<button class="uk-ab-border-btn">Add card</button>
</div>
<style>
.uk-ab-border {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: #fff;
border: 1px solid #e2e8f0;
border-left: 4px solid #1e3a8a;
border-radius: 0.65rem;
}
.uk-ab-border-icon {
width: 32px; height: 32px;
color: #1e3a8a;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.uk-ab-border-body { flex: 1; text-align: left; }
.uk-ab-border-title {
font-size: 0.88rem;
font-weight: 700;
color: #0b1b2f;
}
.uk-ab-border-desc {
font-size: 0.78rem;
color: #64748b;
margin-top: 2px;
}
.uk-ab-border-btn {
padding: 0.4rem 1rem;
background: transparent;
color: #1e3a8a;
border: 1.5px solid #1e3a8a;
border-radius: 0.5rem;
font-weight: 700;
font-size: 0.78rem;
cursor: pointer;
flex-shrink: 0;
}
.uk-ab-border-btn:hover { background: #1e3a8a; color: #fff; }
</style>
Floating Toast Alert
Success!
Your project has been published.
<div class="uk-ab-toast">
<div class="uk-ab-toast-icon success"><i class="fas fa-check"></i></div>
<div class="uk-ab-toast-body">
<div class="uk-ab-toast-title">Success!</div>
<div class="uk-ab-toast-desc">Your project has been published.</div>
</div>
<button class="uk-ab-toast-close"><i class="fas fa-times"></i></button>
</div>
<style>
.uk-ab-toast {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
box-shadow: 0 12px 24px rgba(11, 27, 47, 0.08);
}
.uk-ab-toast-icon {
width: 36px; height: 36px;
border-radius: 0.6rem;
display: flex; align-items: center; justify-content: center;
font-size: 0.85rem;
flex-shrink: 0;
}
.uk-ab-toast-icon.success {
background: #ecfdf5;
color: #059669;
}
.uk-ab-toast-body { flex: 1; text-align: left; }
.uk-ab-toast-title {
font-size: 0.88rem;
font-weight: 700;
color: #0b1b2f;
}
.uk-ab-toast-desc {
font-size: 0.78rem;
color: #64748b;
margin-top: 2px;
}
.uk-ab-toast-close {
background: transparent;
border: 0;
color: #94a3b8;
cursor: pointer;
padding: 4px;
border-radius: 4px;
font-size: 0.75rem;
}
.uk-ab-toast-close:hover { background: #f1f5f9; color: #475569; }
</style>