Alert
Displays a callout for user attention
Divergence from Blok
Additive feature: Closeable parameter. When set, Alert renders a built-in close button at the top right that hides the alert when clicked. Blok has no close affordance — consumers wire up dismissal themselves at the call site.
Examples
Default
Variants
With close button (Blazor-only)
Custom body — anything inside Alert
You've been idle for 14 minutes. For security, we'll sign you out in a moment unless you stay active. Click the button to extend your session and continue where you left off.
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Alert | Container that renders a variant-appropriate icon plus its children. Accepts AlertTitle/AlertDescription for the standard layout or arbitrary markup for custom bodies. |
| AlertTitle | Heading placed in the Alert's text column. Line-clamped to one line with semibold weight. |
| AlertDescription | Body text block placed in the Alert's text column. Supports multi-line prose. |
Alert
Container that renders a variant-appropriate icon plus its children. Accepts AlertTitle/AlertDescription for the standard layout or arbitrary markup for custom bodies.
| Property | Type | Required | Description |
|---|---|---|---|
| Variant | AlertVariant | Visual style / semantic meaning. Default: AlertVariant.Default. Other values: Primary, Danger, Warning, Success. | |
| Closeable | bool | Blazor-only. When true, renders a close button at the top-right that hides the Alert. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the alert container. | |
| ChildContent | RenderFragment? | Alert body. Usually AlertTitle + AlertDescription. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the alert container. |
AlertTitle
Heading placed in the Alert's text column. Line-clamped to one line with semibold weight.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the title container. | |
| ChildContent | RenderFragment? | Title text or inline markup. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the title container. |
AlertDescription
Body text block placed in the Alert's text column. Supports multi-line prose.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the description container. | |
| ChildContent | RenderFragment? | Description content. Paragraphs and inline elements render with relaxed leading. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the description container. |