Components / Alert

Alert

Displays a callout for user attention. Composed of a titled, described container with role="alert". Pure Tailwind on the brain's attribute seam; no behaviour required.

Quick reference

Component	Role
ZitsAlert	Container · Variant: default · destructive
ZitsAlertTitle	Heading line
ZitsAlertDescription	Body copy

Examples

A default alert composes a ZitsAlertTitle and ZitsAlertDescription. An optional leading <svg> is absolutely positioned by the container.

Heads up!

You can add components to your app using the CLI.

razor

<ZitsAlert>
    <svg ...><!-- TriangleAlert icon --></svg>
    <ZitsAlertTitle>Heads up!</ZitsAlertTitle>
    <ZitsAlertDescription>You can add components to your app using the CLI.</ZitsAlertDescription>
</ZitsAlert>

Destructive

Set Variant="destructive" to signal an error or a destructive action.

Error

Your session has expired. Please log in again.

razor

<ZitsAlert Variant="destructive">
    <svg ...><!-- CircleAlert icon --></svg>
    <ZitsAlertTitle>Error</ZitsAlertTitle>
    <ZitsAlertDescription>Your session has expired. Please log in again.</ZitsAlertDescription>
</ZitsAlert>

Installation

Copy the component source into your project with the CLI.

Terminal bash

navius add alert --to ./src/MyApp --namespace MyApp.Ui

API reference

Prop	Type	Default
Variant	string	"default"
ChildContent	RenderFragment	-