Alert
Used to communicate a state that affects a system, feature or page.
AI TipWant to skip the docs? Use the MCP Server
This is the alert title
import { Alert } from "@chakra-ui/react"
const Demo = () => {
return (
<Alert.Root status="info" title="This is the alert title">
<Alert.Indicator />
<Alert.Title>This is the alert title</Alert.Title>
</Alert.Root>
)
}
Usage
import { Alert } from "@chakra-ui/react"<Alert.Root>
<Alert.Indicator />
<Alert.Content>
<Alert.Title />
<Alert.Description />
</Alert.Content>
</Alert.Root>info
If you prefer a closed component composition, check out the
snippet below.Examples
Description
Render the Alert.Description component to provide additional context to the
alert.
Invalid Fields
Your form has some errors. Please fix them and try again.
import { Alert } from "@chakra-ui/react"
const Demo = () => {
return (
<Alert.Root status="error">
<Alert.Indicator />
<Alert.Content>
<Alert.Title>Invalid Fields</Alert.Title>
<Alert.Description>
Your form has some errors. Please fix them and try again.
</Alert.Description>
</Alert.Content>
</Alert.Root>
)
}
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.
There was an error processing your request
Chakra is going live on August 30th. Get ready!
Seems your account is about expire, upgrade now
Data uploaded to the server. Fire on!
import { Alert, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="4" width="full">
<Alert.Root status="error">
<Alert.Indicator />
<Alert.Title>There was an error processing your request</Alert.Title>
</Alert.Root>
<Alert.Root status="info">
<Alert.Indicator />
<Alert.Title>
Chakra is going live on August 30th. Get ready!
</Alert.Title>
</Alert.Root>
<Alert.Root status="warning">
<Alert.Indicator />
<Alert.Title>
Seems your account is about expire, upgrade now
</Alert.Title>
</Alert.Root>
<Alert.Root status="success">
<Alert.Indicator />
<Alert.Title>Data uploaded to the server. Fire on!</Alert.Title>
</Alert.Root>
</Stack>
)
}
Variants
Use the variant prop to change the visual style of the alert. Values can be
either subtle, solid, outline
Data uploaded to the server. Fire on!
Data uploaded to the server. Fire on!
Data uploaded to the server. Fire on!
import { Alert, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="4">
<Alert.Root status="success" variant="subtle">
<Alert.Indicator />
<Alert.Title>Data uploaded to the server. Fire on!</Alert.Title>
</Alert.Root>
<Alert.Root status="success" variant="solid">
<Alert.Indicator />
<Alert.Title>Data uploaded to the server. Fire on!</Alert.Title>
</Alert.Root>
<Alert.Root status="success" variant="surface">
<Alert.Indicator />
<Alert.Title>Data uploaded to the server. Fire on!</Alert.Title>
</Alert.Root>
</Stack>
)
}
With Close Button
Here's and example of how to compose the Alert with a close button.
Success!
Your application has been received. We will review your application and respond within the next 48 hours.
import { Alert, CloseButton } from "@chakra-ui/react"
const Demo = () => {
return (
<Alert.Root>
<Alert.Indicator />
<Alert.Content>
<Alert.Title>Success!</Alert.Title>
<Alert.Description>
Your application has been received. We will review your application
and respond within the next 48 hours.
</Alert.Description>
</Alert.Content>
<CloseButton pos="relative" top="-2" insetEnd="-2" />
</Alert.Root>
)
}
With Spinner
Here's and example of how to compose the Alert with a spinner.
We are loading something
import { Alert, Spinner } from "@chakra-ui/react"
const Demo = () => {
return (
<Alert.Root
borderStartWidth="3px"
borderStartColor="colorPalette.600"
title="We are loading something"
>
<Alert.Indicator>
<Spinner size="sm" />
</Alert.Indicator>
<Alert.Title>We are loading something</Alert.Title>
</Alert.Root>
)
}
Custom Icon
Use the icon prop to pass a custom icon to the alert. This will override the
default icon for the alert status.
Submitting this form will delete your account
import { Alert } from "@chakra-ui/react"
import { LuAlarmClockPlus } from "react-icons/lu"
const Demo = () => {
return (
<Alert.Root status="warning">
<Alert.Indicator>
<LuAlarmClockPlus />
</Alert.Indicator>
<Alert.Title>Submitting this form will delete your account</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.
This is an info alert but shown as teal
import { Alert } from "@chakra-ui/react"
const Demo = () => {
return (
<Alert.Root status="info" colorPalette="teal">
<Alert.Indicator />
<Alert.Title>This is an info alert but shown as teal</Alert.Title>
</Alert.Root>
)
}
Customization
You can style the Alert component using style props.
Black Friday Sale (20% off)
Upgrade your plan to get access to the sale.
Heads up: Black Friday Sale (20% off)
import { Alert, Link, Stack } from "@chakra-ui/react"
import { LuPercent } from "react-icons/lu"
const Demo = () => {
return (
<Stack gap="4">
<Alert.Root title="Success" status="success">
<Alert.Indicator>
<LuPercent />
</Alert.Indicator>
<Alert.Content color="fg">
<Alert.Title>Black Friday Sale (20% off)</Alert.Title>
<Alert.Description>
Upgrade your plan to get access to the sale.
</Alert.Description>
</Alert.Content>
<Link alignSelf="center" fontWeight="medium">
Upgrade
</Link>
</Alert.Root>
<Alert.Root
size="sm"
borderStartWidth="3px"
borderStartColor="colorPalette.solid"
alignItems="center"
title="Success"
status="success"
>
<LuPercent />
<Alert.Title textStyle="sm">
Heads up: Black Friday Sale (20% off)
</Alert.Title>
</Alert.Root>
</Stack>
)
}
Closed Component
Here's how to setup the Alert for a closed component composition.
import { Alert as ChakraAlert } from "@chakra-ui/react"
import * as React from "react"
export interface AlertProps extends Omit<ChakraAlert.RootProps, "title"> {
startElement?: React.ReactNode
endElement?: React.ReactNode
title?: React.ReactNode
icon?: React.ReactElement
}
export const AlertClosedComponent = React.forwardRef<
HTMLDivElement,
AlertProps
>(function Alert(props, ref) {
const { title, children, icon, startElement, endElement, ...rest } = props
return (
<ChakraAlert.Root ref={ref} {...rest}>
{startElement || <ChakraAlert.Indicator>{icon}</ChakraAlert.Indicator>}
{children ? (
<ChakraAlert.Content>
<ChakraAlert.Title>{title}</ChakraAlert.Title>
<ChakraAlert.Description>{children}</ChakraAlert.Description>
</ChakraAlert.Content>
) : (
<ChakraAlert.Title flex="1">{title}</ChakraAlert.Title>
)}
{endElement}
</ChakraAlert.Root>
)
})
If you want to automatically add the closed component to your project, run the command:
npx @chakra-ui/cli snippet add alertProps
Root
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'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 |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
unstyled | booleanWhether to remove the component's style. | |
inline | 'true' | 'false'The inline of the component |
Explorer
Explore the Alert component parts interactively. Click on parts in the sidebar
to highlight them in the preview.
Information
This is an info alert with a description.
Success
Your action was successful and everything worked as expected.
Error
Something went wrong. Please try again.
Component Anatomy
Hover to highlight, click to select parts
title
description
root
indicator
content
alert.recipe.ts