Feedback

Alert

Server Component

Inline callout banner with semantic variants.

Import

tsx

import { Alert, AlertTitle, AlertDescription } from "@cronus-ui/ui";

bash

npx cronus-ui add alert

Examples

Default

An inline callout with an icon, title, and description.

Heads up!

You can add components to your app using the CLI.

tsx

<Alert>
  <Terminal aria-hidden="true" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the CLI.
  </AlertDescription>
</Alert>

Variants

Semantic variants tint the surface, border, and icon for each intent.

New version available

A new release is ready to install.

Payment received

Your subscription is now active.

Storage almost full

You've used 92% of your quota.

Unable to save changes

Check your connection and try again.

tsx

<div className="flex flex-col gap-4">
  <Alert variant="info">
    <Info aria-hidden="true" />
    <AlertTitle>New version available</AlertTitle>
    <AlertDescription>A new release is ready to install.</AlertDescription>
  </Alert>
  <Alert variant="success">
    <CircleCheck aria-hidden="true" />
    <AlertTitle>Payment received</AlertTitle>
    <AlertDescription>Your subscription is now active.</AlertDescription>
  </Alert>
  <Alert variant="warning">
    <TriangleAlert aria-hidden="true" />
    <AlertTitle>Storage almost full</AlertTitle>
    <AlertDescription>You've used 92% of your quota.</AlertDescription>
  </Alert>
  <Alert variant="destructive">
    <CircleAlert aria-hidden="true" />
    <AlertTitle>Unable to save changes</AlertTitle>
    <AlertDescription>Check your connection and try again.</AlertDescription>
  </Alert>
</div>

Title only

Drop the icon and description for a compact, single-line callout.

Your trial ends in 3 days.

tsx

<Alert variant="info">
  <AlertTitle>Your trial ends in 3 days.</AlertTitle>
</Alert>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 2/2Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component AlertDefault layout:inline style:alert {
  description:"Your trial ends soon."
  label "Heads up"
}

page "/audit/alert/default" type:custom {
  use AlertDefault
}

destructive.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component AlertDestructive layout:inline style:alert+destructive {
  description:"Check your card and try again."
  label "Payment failed"
}

page "/audit/alert/destructive" type:custom {
  use AlertDestructive
}

API Reference

Generated from the component's exported types.

AlertProps

Extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants>

Prop	Type	Default	Description
`variant`	`"default" \| "info" \| "success" \| "warning" \| "destructive"`	`"default"`	One of "default" \| "info" \| "success" \| "warning" \| "destructive".
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.
`id`	`string`	—	DOM id of the root element.

AlertTitleProps

Extends HTMLAttributes<HTMLParagraphElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

AlertDescriptionProps

Extends HTMLAttributes<HTMLParagraphElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.