import { Alert } from "@/components/ui/alert"
const Demo = () => {
return <Alert status="info" title="This is the alert title" />
}
Setup
If you don't already have the snippet, run the following command to add the
alert snippet
npx @chakra-ui/cli snippet add alertThe snippet includes a closed component composition for the Alert component.
Usage
import { Alert } from "@/components/ui/alert"<Alert title="Alert Title" icon={<LuTerminal />}>
This is the alert description
</Alert>Examples
Description
Use the children prop to provide additional context to the alert. This will be
displayed below the alert message.
import { Alert } from "@/components/ui/alert"
const Demo = () => {
return (
<Alert status="error" title="Invalid Fields">
Your form has some errors. Please fix them and try again.
</Alert>
)
}
Status
Change the status of the alerts by passing the status prop. This affects the
color scheme and icon used. Alert supports error, success, warning, and
info statuses.
import { Stack } from "@chakra-ui/react"
import { Alert } from "@/components/ui/alert"
const Demo = () => {
return (
<Stack gap="2" width="full">
<Alert
status="error"
title="There was an error processing your request"
/>
<Alert
status="info"
title="Chakra is going live on August 30th. Get ready!"
/>
<Alert
status="warning"
title="Seems your account is about expire, upgrade now"
/>
<Alert status="success" title="Data uploaded to the server. Fire on!" />
</Stack>
)
}
Variants
Use the variant prop to change the visual style of the alert. Values can be
either subtle, solid, outline
import { Stack } from "@chakra-ui/react"
import { Alert } from "@/components/ui/alert"
const Demo = () => {
return (
<Stack gap="3">
<Alert
status="success"
variant="subtle"
title="Data uploaded to the server. Fire on!"
/>
<Alert
status="success"
variant="solid"
title="Data uploaded to the server. Fire on!"
/>
<Alert
status="success"
variant="surface"
title="Data uploaded to the server. Fire on!"
/>
</Stack>
)
}
Custom Icon
Use the icon prop to pass a custom icon to the alert. This will override the
default icon for the alert status.
import { Alert } from "@/components/ui/alert"
import { LuAlarmPlus } from "react-icons/lu"
const Demo = () => {
return (
<Alert
icon={<LuAlarmPlus />}
status="warning"
title="Submitting this form will delete your account"
/>
)
}
Without Snippet
Here's an example of how to use the Alert without the snippet.
import { Alert } from "@chakra-ui/react"
const Demo = () => {
return (
<Alert.Root status="info">
<Alert.Indicator />
<Alert.Title>This is the alert title</Alert.Title>
</Alert.Root>
)
}
Color Palette Override
The default colorPalette is inferred from the status prop. To override the
color palette, pass the colorPalette prop.
import { Alert } from "@/components/ui/alert"
const Demo = () => {
return (
<Alert
status="info"
title="This is an info alert but shown as teal"
colorPalette="teal"
/>
)
}
Props
Root
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'The color palette of the component |
status | 'info' | 'info' | 'warning' | 'success' | 'error' | 'neutral'The status of the component |
variant | 'subtle' | 'subtle' | 'surface' | 'outline' | 'solid'The variant of the component |
size | 'md' | 'sm' | 'md' | 'lg'The size of the component |