Static feedback section with explicit live-region opt-in.
@combric/react · v1.1.1 · Current
import { Alert, AlertTitle, AlertDescription } from "@combric/react";Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.
Check the source file.
import { Alert, AlertDescription, AlertTitle } from "@combric/react";
export function Example() {
return <Alert tone="error"><AlertTitle>Import failed</AlertTitle><AlertDescription>Check the source file.</AlertDescription></Alert>;
}All required fields are complete.
import { Alert, AlertDescription, AlertTitle } from "@combric/react";
export function Example() {
return <Alert tone="neutral"><AlertTitle>Ready to review</AlertTitle><AlertDescription>All required fields are complete.</AlertDescription></Alert>;
}The latest invoice could not be processed.
import { Alert, AlertDescription, AlertTitle } from "@combric/react";
export function Example() {
return <Alert tone="error" live="assertive"><AlertTitle>Payment failed</AlertTitle><AlertDescription>The latest invoice could not be processed.</AlertDescription></Alert>;
}| Name |
|---|
Alert |
AlertTitle |
AlertDescription |
| Property / capability | Published contract |
|---|---|
| tone | neutral | error |
| live | polite | assertive |
Static by default; live semantics are added only when explicitly requested.
Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.