Title and Description

Use the title and description prop to set the title and description of the Alert.

Heads up!
You can change the primary color in your app config.
<Alert
    title="Heads up!"
    description="You can change the primary color in your app config."
/>

Icon

Use the icon prop to show an Icon.

Heads up!
You can change the primary color in your app config.
<Alert
    title="Heads up!"
    description="You can change the primary color in your app config."
    icon="i-lucide:terminal"
/>

Color and Variant

Use the color and variant prop to change the color and variant of the Alert.

Heads up!
You can change the primary color in your app config.
<Alert
    title="Heads up!"
    description="You can change the primary color in your app config."
    icon="i-lucide:terminal"
    color="primary"
    variant="outline"
/>

Close

Use the close prop to display a Button to dismiss the Alert. You can pass any property from the Button component to customize it.

Heads up!
You can change the primary color in your app config.
<Alert
    title="Heads up!"
    description="You can change the primary color in your app config."
    icon="i-lucide:terminal"
    color="primary"
    variant="outline"
    close
/>

Actions

Use the actions prop to add some Button actions to the Alert.

Heads up!
You can change the primary color in your app config.
<Alert
    title="Heads up!"
    description="You can change the primary color in your app config."
    icon="i-lucide:terminal"
    color="primary"
    variant="outline"
    close
    actions={[{ label: uid() }]}
/>

Orientation

Use the orientation prop to change the orientation of the Alert.

Heads up!
You can change the primary color in your app config.
<Alert
    title="Heads up!"
    description="You can change the primary color in your app config."
    icon="i-lucide:terminal"
    color="primary"
    variant="outline"
    close
    actions={[{ label: uid() }]}
    orientation="vertical"
/>