This is the alert title
import { Alert } from '@saas-ui/react'
export const AlertBasic = () => {
return <Alert status="info" title="This is the alert title" />
}
Anatomy
import { Alert } from '@saas-ui/react/alert'<Alert />Examples
Description
Use the children prop to provide additional context to the alert. This will be
displayed below the alert message.
Invalid Fields
Your form has some errors. Please fix them and try again.
import { Alert } from '@saas-ui/react'
export const AlertWithDescription = () => {
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.
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 { Stack } from '@chakra-ui/react'
import { Alert } from '@saas-ui/react'
export const AlertWithStatus = () => {
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
Data uploaded to the server. Fire on!
Data uploaded to the server. Fire on!
Data uploaded to the server. Fire on!
Data uploaded to the server. Fire on!
import { Stack } from '@chakra-ui/react'
import { Alert } from '@saas-ui/react'
export const AlertWithVariants = () => {
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!"
/>
<Alert
status="success"
variant="outline"
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.
Submitting this form will delete your account
import { Alert } from '@saas-ui/react'
import { LuAlarmClockPlus } from 'react-icons/lu'
export const AlertWithCustomIcon = () => {
return (
<Alert
icon={<LuAlarmClockPlus />}
status="warning"
title="Submitting this form will delete your account"
/>
)
}
Props
Root
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'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 |
inline | 'true' | 'false'The inline of the component |