Alert

Overview

Alert is a helm-native component: it implements its own presentation directly, with no Navius primitive underneath. The root renders role="alert" and layers a Variant-driven Tailwind class set; ZitsAlertTitle and ZitsAlertDescription are plain typographic slots for the heading and body text.

Install

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

Usage

@using Zits.Ui.Components

<ZitsAlert Variant="warning">
    <ZitsAlertTitle>Heads up</ZitsAlertTitle>
    <ZitsAlertDescription>Something needs your attention.</ZitsAlertDescription>
</ZitsAlert>

Parts and props

ChildContent and Attributes pass through unchanged on all three parts. ZitsAlert adds:

Prop	Type	Default	Description
Variant	string	"default"	One of default, warning, destructive. Selects the Tailwind class set.

ZitsAlertTitle and ZitsAlertDescription take no variant/size params of their own.

Styling surface

Attributes on all three parts is forwarded to the rendered element and merged with the Variant class set (on the root) via Cn.Class, with the caller’s classes applied last.

Parameter	Values
Variant	default · warning · destructive

The warning variant uses the semantic --warning token for its border, text, and leading icon. Define --warning-foreground alongside it when extending the role to filled warning surfaces; keeping the pair in the theme preserves one ecosystem contract.

Accessibility mechanism

The root renders native role="alert", which assistive tech announces as a live region when the element is inserted into the DOM. No data-* state hooks are emitted; the component carries no other ARIA wiring.