Featured
AlertsInline Alert
A static status message in four severities, sitting in the flow.
#alert#inline#status
6 frameworksBeginner
Loading…
The quiet variant - a coloured border and text on the page background.
<!--
The quiet variant: no fill, just a coloured border and coloured text on the
page's own background. It leans on -700 text (light) / -300 text (dark), which
clear AA on white and gray-900 respectively, plus the per-severity icon shape -
a border colour alone is the weakest possible signal, so it never works alone.
-->
<div class="flex items-start gap-2.5 rounded-lg border border-blue-300 bg-transparent px-3.5 py-3 text-blue-700 dark:border-blue-700 dark:text-blue-300" role="status">
<svg class="mt-px h-[1.125rem] w-[1.125rem] flex-none" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm1 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2 3a1 1 0 0 1 2 0v5a1 1 0 1 1-2 0V9Z" />
</svg>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold">Heads up</p>
<p class="mt-0.5 text-sm leading-normal text-gray-600 dark:text-gray-300">This workspace is in read-only mode while the export runs.</p>
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | Heading text for the card. |
childrenrequired | ReactNode | - | Content rendered inside the component. |
severity | 'info' | 'success' | 'warning' | 'error' | 'info' | Tone of the notification. Sets its colour and icon. |
className | string | - | Additional classes merged onto the root element. |
It leans on -700 text (light) and -300 text (dark), which clear AA on white and gray-900, plus the per-severity icon shape. A border colour alone is the weakest signal there is, so the icon always rides along.