Component Library
Browse and explore components
Alert
An Alert is a UI component used to display important messages or notifications to the user.
Default Alert
Primary - A simple primary alert
Secondary A simple Secondary alert
Success A simple Success alert
Info A simple Info alert
Warning A simple Warning alert
Error A simple Error alert
Dark A simple Dark alert
Component Code
Copy Code
import { Alert } from 'flowbite-react'
const DefaultAlertCode = () => {
return (
<div>
<div className='flex flex-col gap-2'>
<Alert color='primary' className='rounded-md'>
<span className='font-medium'>Primary</span> - A simple primary alert
</Alert>
<Alert color='secondary' className='rounded-md'>
<span className='font-medium'>Secondary</span> A simple Secondary
alert
</Alert>
<Alert color='success' className='rounded-md'>
<span className='font-medium'>Success</span> A simple Success alert
</Alert>
<Alert color='info' className='rounded-md'>
<span className='font-medium'>Info</span> A simple Info alert
</Alert>
<Alert color='warning' className='rounded-md'>
<span className='font-medium'>Warning</span> A simple Warning alert
</Alert>
<Alert color='error' className='rounded-md'>
<span className='font-medium'>Error</span> A simple Error alert
</Alert>
<Alert color='dark' className='rounded-md'>
<span className='font-medium'>Dark</span> A simple Dark alert
</Alert>
</div>
</div>
)
}
export default DefaultAlertCode
Light Default Alert
Primary - A simple primary alert
Secondary A simple Secondary alert
Success A simple Success alert
Info A simple Info alert
Warning A simple Warning alert
Error A simple Error alert
Light A simple Light alert
Component Code
Copy Code
import { Alert } from 'flowbite-react'
const LightDefaultAlertCode = () => {
return (
<div>
<div className='flex flex-col gap-2'>
<Alert color='lightprimary' className='rounded-md'>
<span className='font-medium'>Primary</span> - A simple primary alert
</Alert>
<Alert color='lightsecondary' className='rounded-md'>
<span className='font-medium'>Secondary</span> A simple Secondary
alert
</Alert>
<Alert color='lightsuccess' className='rounded-md'>
<span className='font-medium'>Success</span> A simple Success alert
</Alert>
<Alert color='lightinfo' className='rounded-md'>
<span className='font-medium'>Info</span> A simple Info alert
</Alert>
<Alert color='lightwarning' className='rounded-md'>
<span className='font-medium'>Warning</span> A simple Warning alert
</Alert>
<Alert color='lighterror' className='rounded-md'>
<span className='font-medium'>Error</span> A simple Error alert
</Alert>
<Alert color='lightgray' className='rounded-md'>
<span className='font-medium'>Light</span> A simple Light alert
</Alert>
</div>
</div>
)
}
export default LightDefaultAlertCode
Alert With Icon
Primary - A simple primary alert
Secondary - A simple secondary alert
Success - A simple success alert
Info - A simple Info alert
Warning - A simple warning alert
Danger - A simple Danger alert
Dark - A simple Dark alert
Component Code
Copy Code
import { Alert } from 'flowbite-react'
import { HiInformationCircle } from 'react-icons/hi'
const AlertWithIconCode = () => {
return (
<div>
<div className='flex flex-col gap-2'>
<Alert
color='primary'
icon={HiInformationCircle}
className='rounded-md'>
<span className='font-medium'>Primary</span> - A simple primary alert
</Alert>
<Alert
color='secondary'
icon={HiInformationCircle}
className='rounded-md'>
<span className='font-medium'>Secondary</span> - A simple secondary
alert
</Alert>
<Alert
color='success'
icon={HiInformationCircle}
className='rounded-md'>
<span className='font-medium'>Success</span> - A simple success alert
</Alert>
<Alert color='info' icon={HiInformationCircle} className='rounded-md'>
<span className='font-medium'>Info</span> - A simple Info alert
</Alert>
<Alert
color='warning'
icon={HiInformationCircle}
className='rounded-md'>
<span className='font-medium'>Warning</span> - A simple warning alert
</Alert>
<Alert color='error' icon={HiInformationCircle} className='rounded-md'>
<span className='font-medium'>Danger</span> - A simple Danger alert
</Alert>
<Alert color='dark' icon={HiInformationCircle} className='rounded-md'>
<span className='font-medium'>Dark</span> - A simple Dark alert
</Alert>
</div>
</div>
)
}
export default AlertWithIconCode
Light Alert With Icon
Primary - A simple Primary alert
Secondary - A simple Secondary alert
Success - A simple Success alert
Info - A simple Info alert
Warning - A simple Warning alert
Error - A simple Error alert
Light A simple Light alert
Component Code
Copy Code
import { Alert } from 'flowbite-react'
import { HiInformationCircle } from 'react-icons/hi'
const LightAlertIconCode = () => {
return (
<div>
<div className='flex flex-col gap-2'>
<Alert
color='lightprimary'
icon={HiInformationCircle}
className='rounded-md'>
<span className='font-medium'>Primary</span> - A simple Primary alert
</Alert>
<Alert
color='lightsecondary'
icon={HiInformationCircle}
className='rounded-md'>
<span className='font-medium'>Secondary</span> - A simple Secondary
alert
</Alert>
<Alert
color='lightsuccess'
icon={HiInformationCircle}
className='rounded-md'>
<span className='font-medium'>Success</span> - A simple Success alert
</Alert>
<Alert
color='lightinfo'
icon={HiInformationCircle}
className='rounded-md'>
<span className='font-medium'>Info</span> - A simple Info alert
</Alert>
<Alert
color='lightwarning'
icon={HiInformationCircle}
className='rounded-md'>
<span className='font-medium'>Warning</span> - A simple Warning alert
</Alert>
<Alert
color='lighterror'
icon={HiInformationCircle}
className='rounded-md'>
<span className='font-medium'>Error</span> - A simple Error alert
</Alert>
<Alert
color='lightgray'
icon={HiInformationCircle}
className='rounded-md'>
<span className='font-medium'>Light</span> A simple Light alert
</Alert>
</div>
</div>
)
}
export default LightAlertIconCode
Dismissible Alert
Primary - A simple Primary alert
Secondary - A simple Secondary alert
Success - A simple Success alert
Info - A simple Info alert
Warning - A simple Warning alert
Error - A simple Error alert
Dark - A simple Dark alert
Component Code
Copy Code
import { Alert } from 'flowbite-react'
const DismisableAlertCode = () => {
return (
<div>
<div className='flex flex-col gap-2'>
<Alert
color='primary'
onDismiss={() => alert('Alert dismissed!')}
className='rounded-md'>
<span className='font-medium'>Primary</span> - A simple Primary alert
</Alert>
<Alert
color='secondary'
onDismiss={() => alert('Alert dismissed!')}
className='rounded-md'>
<span className='font-medium'>Secondary</span> - A simple Secondary
alert
</Alert>
<Alert
color='success'
onDismiss={() => alert('Alert dismissed!')}
className='rounded-md'>
<span className='font-medium'>Success</span> - A simple Success alert
</Alert>
<Alert
color='info'
onDismiss={() => alert('Alert dismissed!')}
className='rounded-md'>
<span className='font-medium'>Info</span> - A simple Info alert
</Alert>
<Alert
color='warning'
onDismiss={() => alert('Alert dismissed!')}
className='rounded-md'>
<span className='font-medium'>Warning</span> - A simple Warning alert
</Alert>
<Alert
color='error'
onDismiss={() => alert('Alert dismissed!')}
className='rounded-md'>
<span className='font-medium'>Error</span> - A simple Error alert
</Alert>
<Alert
color='dark'
onDismiss={() => alert('Alert dismissed!')}
className='rounded-md'>
<span className='font-medium'>Dark</span> - A simple Dark alert
</Alert>
</div>
</div>
)
}
export default DismisableAlertCode
Light Dismissible Alert
Primary - A simple Primary alert
Secondary - A simple Secondary alert
Success - A simple Success alert
Info - A simple Info alert
Warning - A simple Warning alert
Error - A simple Error alert
Dark - A simple Dark alert
Component Code
Copy Code
import { Alert } from 'flowbite-react'
const LightDissmisableCode = () => {
return (
<div>
<div className='flex flex-col gap-2'>
<Alert
color='lightprimary'
onDismiss={() => alert('Alert dismissed!')}
className='rounded-md'>
<span className='font-medium'>Primary</span> - A simple Primary alert
</Alert>
<Alert
color='lightsecondary'
onDismiss={() => alert('Alert dismissed!')}
className='rounded-md'>
<span className='font-medium'>Secondary</span> - A simple Secondary
alert
</Alert>
<Alert
color='lightsuccess'
onDismiss={() => alert('Alert dismissed!')}
className='rounded-md'>
<span className='font-medium'>Success</span> - A simple Success alert
</Alert>
<Alert
color='lightinfo'
onDismiss={() => alert('Alert dismissed!')}
className='rounded-md'>
<span className='font-medium'>Info</span> - A simple Info alert
</Alert>
<Alert
color='lightwarning'
onDismiss={() => alert('Alert dismissed!')}
className='rounded-md'>
<span className='font-medium'>Warning</span> - A simple Warning alert
</Alert>
<Alert
color='lighterror'
onDismiss={() => alert('Alert dismissed!')}
className='rounded-md'>
<span className='font-medium'>Error</span> - A simple Error alert
</Alert>
<Alert
color='lightgray'
onDismiss={() => alert('Alert dismissed!')}
className='rounded-md'>
<span className='font-medium'>Dark</span> - A simple Dark alert
</Alert>
</div>
</div>
)
}
export default LightDissmisableCode
Rounded Alert
Primary - A simple Primary alert
Secondary - A simple Secondary alert
Success - A simple Success alert
Info - A simple Info alert
Warning - A simple Warning alert
Error - A simple Error alert
Dark - A simple Dark alert
Component Code
Copy Code
import { Alert } from 'flowbite-react'
const RoundedAlertCode = () => {
return (
<div>
<div className='flex flex-col gap-2'>
<Alert color='primary' rounded>
<span className='font-medium'>Primary</span> - A simple Primary alert
</Alert>
<Alert color='secondary' rounded>
<span className='font-medium'>Secondary</span> - A simple Secondary
alert
</Alert>
<Alert color='success' rounded>
<span className='font-medium'>Success</span> - A simple Success alert
</Alert>
<Alert color='info' rounded>
<span className='font-medium'>Info</span> - A simple Info alert
</Alert>
<Alert color='warning' rounded>
<span className='font-medium'>Warning</span> - A simple Warning alert
</Alert>
<Alert color='error' rounded>
<span className='font-medium'>Error</span> - A simple Error alert
</Alert>
<Alert color='dark' rounded>
<span className='font-medium'>Dark</span> - A simple Dark alert
</Alert>
</div>
</div>
)
}
export default RoundedAlertCode
Light Rounded Alert
Primary - A simple Primary alert
Secondary - A simple Secondary alert
Success - A simple Success alert
Info - A simple Info alert
Warning - A simple Warning alert
Error - A simple Error alert
Light - A simple Light alert
Component Code
Copy Code
import { Alert } from 'flowbite-react'
const LightRoundedCode = () => {
return (
<div>
<div className='flex flex-col gap-2'>
<Alert color='lightprimary' rounded>
<span className='font-medium'>Primary</span> - A simple Primary alert
</Alert>
<Alert color='lightsecondary' rounded>
<span className='font-medium'>Secondary</span> - A simple Secondary
alert
</Alert>
<Alert color='lightsuccess' rounded>
<span className='font-medium'>Success</span> - A simple Success alert
</Alert>
<Alert color='lightinfo' rounded>
<span className='font-medium'>Info</span> - A simple Info alert
</Alert>
<Alert color='lightwarning' rounded>
<span className='font-medium'>Warning</span> - A simple Warning alert
</Alert>
<Alert color='lighterror' rounded>
<span className='font-medium'>Error</span> - A simple Error alert
</Alert>
<Alert color='lightgray' rounded>
<span className='font-medium'>Light</span> - A simple Light alert
</Alert>
</div>
</div>
)
}
export default LightRoundedCode
Light Border Accent
Primary - A simple Primary alert
Secondary - A simple Secondary alert
Success - A simple Success alert
Info - A simple Info alert
Warning - A simple Warning alert
Error - A simple Error alert
Component Code
Copy Code
import { Alert } from 'flowbite-react'
const LightBorderAcccentCode = () => {
return (
<div>
<div className='flex flex-col gap-2'>
<Alert color='lightprimary' withBorderAccent>
<span>
<span className='font-medium'>Primary</span> - A simple Primary
alert
</span>
</Alert>
<Alert color='lightsecondary' withBorderAccent>
<span>
<span className='font-medium'>Secondary</span> - A simple Secondary
alert
</span>
</Alert>
<Alert color='lightsuccess' withBorderAccent>
<span>
<span className='font-medium'>Success</span> - A simple Success
alert
</span>
</Alert>
<Alert color='lightinfo' withBorderAccent>
<span>
<span className='font-medium'>Info</span> - A simple Info alert
</span>
</Alert>
<Alert color='lightwarning' withBorderAccent>
<span>
<span className='font-medium'>Warning</span> - A simple Warning
alert
</span>
</Alert>
<Alert color='lighterror' withBorderAccent>
<span>
<span className='font-medium'>Error</span> - A simple Error alert
</span>
</Alert>
</div>
</div>
)
}
export default LightBorderAcccentCode
Additional Content
Info alert! Change a few things up and try submitting again.
More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Component Code
Copy Code
import { Alert, Button } from 'flowbite-react'
import { HiInformationCircle, HiEye } from 'react-icons/hi'
const AdditionalAlertCode = () => {
function ExampleAdditionalContent() {
return (
<>
<div className='mb-4 mt-2 text-sm text-cyan-700 dark:text-cyan-800'>
More info about this info alert goes here. This example text is going
to run a bit longer so that you can see how spacing within an alert
works with this kind of content.
</div>
<div className='flex gap-3'>
<Button
color={'primary'}
className='flex gap-2 items-center'
size={'sm'}>
<HiEye size={15} />
View more
</Button>
<Button
color={'error'}
className='flex gap-2 items-center'
size={'sm'}>
Dismiss
</Button>
</div>
</>
)
}
return (
<div>
<Alert
additionalContent={<ExampleAdditionalContent />}
color='lightprimary'
icon={HiInformationCircle}
className='rounded-md'>
<span className='font-medium'>Info alert!</span> Change a few things up
and try submitting again.
</Alert>
</div>
)
}
export default AdditionalAlertCode
All Options
Info alert! Change a few things up and try submitting again.
More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Component Code
Copy Code
import { Alert, Button } from 'flowbite-react'
import { HiInformationCircle, HiEye } from 'react-icons/hi'
const AllOptionscode = () => {
function ExampleAdditionalContent() {
return (
<>
<div className='mb-4 mt-2 text-success'>
More info about this info alert goes here. This example text is going
to run a bit longer so that you can see how spacing within an alert
works with this kind of content.
</div>
<div className='flex gap-3'>
<Button
color={'success'}
className='flex gap-2 items-center'
size={'sm'}>
<HiEye size={15} />
View more
</Button>
<Button
color={'error'}
className='flex gap-2 items-center'
size={'sm'}>
Dismiss
</Button>
</div>
</>
)
}
return (
<div>
<Alert
additionalContent={<ExampleAdditionalContent />}
color='lightsuccess'
icon={HiInformationCircle}
onDismiss={() => alert('Alert dismissed!')}
rounded
className='rounded-md'>
<span className='font-medium'>Info alert!</span> Change a few things up
and try submitting again.
</Alert>
</div>
)
}
export default AllOptionscode
API ( Alert )
| Prop | Description | Type | Default |
|---|---|---|---|
color | Sets the color scheme of the alert box. | 'primary' | 'success' | 'warning' | 'green' | 'info' |
icon | Adds a custom icon to the alert box. | 'HiInformationCircle' | - |
onDismiss | Callback function triggered when the dismiss button is clicked. | onDismiss={() => alert('Alert dismissed!')} | - |
rounded | Applies rounded corners to the alert box. | boolean | false |
withBorderAccent | Adds a border accent to the alert box. | boolean | false |
additionalContent | Allows additional content to be added inside the alert box. | React.ReactNode | null |