Alert

Displays a callout for user attention, with default and destructive variants.

<.alert_title>Heads up!</.alert_title><.alert_description>You can add components to your app using the CLI.</.alert_description>

<.alert><.alert_title>Heads up!</.alert_title><.alert_description>You can add components to your app using the CLI.</.alert_description></.alert>

Examples

Variants

Default and destructive variants.

Heads up!

You can add components to your app using the CLI.

Something went wrong

Your session has expired. Please log in again.

<div class="flex flex-col gap-4 max-w-md">
  <.alert variant="default">
    <.alert_title>Heads up!</.alert_title>
    <.alert_description>You can add components to your app using the CLI.</.alert_description>
  </.alert>
  <.alert variant="destructive">
    <.alert_title>Something went wrong</.alert_title>
    <.alert_description>Your session has expired. Please log in again.</.alert_description>
  </.alert>
</div>

Show code

Props

Name	Type	Default	Values
class	:string
rest	:global
variant	:string	"default"	default \| destructive
inner_block (slot)	:slot