feedback
Alert
Static inline banner for info, success, warning, and danger messages with optional dismiss control.
Copied!
Examples
Variants
info, success, warning, and danger banners.
Copied!
Heads up
Your trial renews in 3 days.
Saved
Project settings were updated.
Action needed
Verify your domain before go-live.
Deploy failed
The build exited with a non-zero status.
<div class="space-y-3">
<x-ui.alert variant="info" title="Heads up">Your trial renews in 3 days.</x-ui.alert>
<x-ui.alert variant="success" title="Saved">Project settings were updated.</x-ui.alert>
<x-ui.alert variant="warning" title="Action needed">Verify your domain before go-live.</x-ui.alert>
<x-ui.alert variant="danger" title="Deploy failed">The build exited with a non-zero status.</x-ui.alert>
</div>
<div class="space-y-3">
<div class="flex gap-3 rounded-card border border-info/30 bg-info-soft p-4" role="status">
<span class="text-info" aria-hidden="true">i</span>
<div>
<p class="text-sm font-semibold text-fg">Heads up</p>
<p class="mt-1 text-sm text-fg-muted">Your trial renews in 3 days.</p>
</div>
</div>
<div class="flex gap-3 rounded-card border border-success/30 bg-success-soft p-4" role="status">
<span class="text-success" aria-hidden="true">✓</span>
<div>
<p class="text-sm font-semibold text-fg">Saved</p>
<p class="mt-1 text-sm text-fg-muted">Project settings were updated.</p>
</div>
</div>
<div class="flex gap-3 rounded-card border border-warning/30 bg-warning-soft p-4" role="status">
<span class="text-warning" aria-hidden="true">!</span>
<div>
<p class="text-sm font-semibold text-fg">Action needed</p>
<p class="mt-1 text-sm text-fg-muted">Verify your domain before go-live.</p>
</div>
</div>
<div class="flex gap-3 rounded-card border border-danger/30 bg-danger-soft p-4" role="alert">
<span class="text-danger" aria-hidden="true">!</span>
<div>
<p class="text-sm font-semibold text-fg">Deploy failed</p>
<p class="mt-1 text-sm text-fg-muted">The build exited with a non-zero status.</p>
</div>
</div>
</div>
Dismissible
Optional dismiss button with Alpine show state.
Copied!
New docs theme
Try the warm theme from the header switcher.
<x-ui.alert variant="info" title="New docs theme" dismissible>
Try the warm theme from the header switcher.
</x-ui.alert>
<div
class="flex gap-3 rounded-card border border-info/30 bg-info-soft p-4"
role="status"
x-data="{ show: true }"
x-show="show"
>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold text-fg">New docs theme</p>
<p class="mt-1 text-sm text-fg-muted">Try the warm theme from the header switcher.</p>
</div>
<button type="button" class="rounded-control p-1 text-fg-muted" x-on:click="show = false" aria-label="Dismiss alert">×</button>
</div>
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | info|success|warning|danger | info | Semantic tone and soft background treatment. |
| title | string|null | null | Optional bold heading above the body slot. |
| dismissible | bool | false | Adds a dismiss button that hides the alert via Alpine show state. |
Accessibility notes
Architected with WCAG 2.2 AA patterns in mind. These notes document the exact keyboard and ARIA behavior for this component.
- danger uses role="alert". Other variants use role="status" to avoid interrupting the user unnecessarily.
- Decorative icons are aria-hidden. The dismiss button has an accessible name.
- Dismissible alerts use x-show and x-cloak. They are removed from the accessibility tree when hidden.
Built by Praesepe
Architecture & custom software partner
Praesepe uses these exact UI primitives to ship SME dashboards, inventory systems, invoicing desks, and internal tools faster, without rebuilding a design system for every client.
- Same Blade + Tailwind 4 + Alpine 3 stack you see in this docs site
- Opinionated for Indonesian SME ops: invoices, stock, roles, approvals
- Architected with WCAG 2.2 AA patterns in mind for keyboard and ARIA