Alert
Simple primary alert - check it out!
Simple secondary alert - check it out!
Simple success alert - check it out!
Simple danger alert - check it out!
Simple warning alert - check it out!
Simple info alert - check it out!
Simple light alert - check it out!
Simple dark alert - check it out!
<Card>
<CardHeader>
<h5>Basic Alerts</h5>
</CardHeader>
<CardBody>
<Alert variant="primary" role="alert">Simple primary alert - check it out!</Alert>
<Alert variant="secondary" role="alert">Simple secondary alert - check it out!</Alert>
<Alert variant="success" role="alert">Simple success alert - check it out!</Alert>
<Alert variant="danger" role="alert">Simple danger alert - check it out!</Alert>
<Alert variant="warning" role="alert">Simple warning alert - check it out!</Alert>
<Alert variant="info" role="alert">Simple info alert - check it out!</Alert>
<Alert variant="light" role="alert">Simple light alert - check it out!</Alert>
<Alert variant="dark" role="alert">Simple dark alert - check it out!</Alert>
</CardBody>
</Card>Light primary color alert with an example link - Check it!
Light secondary color alert with an example link - Check it!
Light success color alert with an example link - Check it!
Light danger color alert with an example link - Check it!
Light warning color alert with an example link - Check it!
Light info color alert with an example link - Check it!
Light light color alert with an example link - Check it!
Light dark color alert with an example link - Check it!
<Card>
<CardHeader>
<h5>Light Alert With Link color</h5>
</CardHeader>
<CardBody>
<Alert color="light-primary">
Light primary color alert with<Alert.Link href="#">an example link</Alert.Link> - Check it!
</Alert>
<Alert color="light-secondary">
Light secondary color alert with<Alert.Link href="#">an example link</Alert.Link> - Check it!
</Alert>
<Alert color="light-success">
Light success color alert with<Alert.Link href="#">an example link</Alert.Link> - Check it!
</Alert>
<Alert color="light-danger">
Light danger color alert with<Alert.Link href="#">an example link</Alert.Link> - Check it!
</Alert>
<Alert color="light-warning">
Light warning color alert with<Alert.Link href="#">an example link</Alert.Link> - Check it!
</Alert>
<Alert color="light-info">
Light info color alert with<Alert.Link href="#">an example link</Alert.Link> - Check it!
</Alert>
<Alert color="light-light">
Light light color alert with<Alert.Link href="#">an example link</Alert.Link> - Check it!
</Alert>
<Alert color="light-dark">
Light dark color alert with<Alert.Link href="#">an example link</Alert.Link> - Check it!
</Alert>
</CardBody>
</Card>Outline-alert primary - check it out!
Outline-alert secondary - check it out!
Outline-alert success - check it out!
Outline-alert danger - check it out!
Outline-alert warning - check it out!
Outline-alert info - check it out!
Outline-alert light - check it out!
Outline-alert dark - check it out!
<Card>
<CardHeader>
<h5>Outline Alerts</h5>
</CardHeader>
<CardBody>
<Alert variant="outline-primary" role="alert">Outline-alert primary - check it out!</Alert>
<Alert variant="outline-secondary" role="alert">Outline-alert secondary - check it out!</Alert>
<Alert variant="outline-success" role="alert">Outline-alert success - check it out!</Alert>
<Alert variant="outline-danger" role="alert">Outline-alert danger - check it out!</Alert>
<Alert variant="outline-warning" role="alert">Outline-alert warning - check it out!</Alert>
<Alert variant="outline-info" role="alert">Outline-alert info - check it out!</Alert>
<Alert variant="outline-light" role="alert">Outline-alert light - check it out!</Alert>
<Alert variant="outline-dark" role="alert">Outline-alert dark - check it out!</Alert>
</CardBody>
</Card>Light-border-primary alert With icons - check it out!
Light-border-secondary alert With icons - check it out!
Light-border-success alert With icons - check it out!
Light-border-danger alert With icons - check it out!
Light-border-warning alert With icons - check it out!
Light-border-info alert With icons - check it out!
Light-border-light alert With icons - check it out!
Light-border-dark alert With icons - check it out!
<Card>
<CardHeader>
<h5>Alert With Icon</h5>
</CardHeader>
<CardBody>
<Alert variant="light-border-primary" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<Download size={16} className="me-2" />
Light-border-primary alert With icons - check it out!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-secondary" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<Wheelchair size={16} className="me-2" />
Light-border-secondary alert With icons - check it out!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-success" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<CheckCircle size={16} className="me-2" />
Light-border-success alert With icons - check it out!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-danger" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<Power size={16} className="me-2" />
Light-border-danger alert With icons - check it out!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-warning" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<Warning size={16} className="me-2" />
Light-border-warning alert With icons - check it out!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-info" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<Info size={16} className="me-2" />
Light-border-info alert With icons - check it out!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-light" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<AlignBottom size={16} className="me-2" />
Light-border-light alert With icons - check it out!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-dark" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<Globe size={16} className="me-2" />
Light-border-dark alert With icons - check it out!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
</CardBody>
</Card>Alert with left slide border - check out!
Alert with left slide border - check out!
Alert with left slide border - check out!
<Card>
<CardHeader>
<h5>Alert With Left Border</h5>
</CardHeader>
<CardBody>
<Alert variant="border-primary" role="alert">Alert with left slide border - check out!</Alert>
<Alert variant="border-secondary" role="alert">Alert with left slide border - check out!</Alert>
<Alert variant="border-success" role="alert">Alert with left slide border - check out!</Alert>
</CardBody>
</Card>Primary label alert - check out!
Secondary label alert - check out!!
Success label alert - check out!
<Card>
<CardHeader>
<h5>Alert With Label Icons</h5>
</CardHeader>
<CardBody>
<div className="alert alert-label alert-label-primary" role="alert">
<p className="mb-0 d-flex align-items-center gap-2">
<span className="label-icon label-icon-primary">
<DownloadSimple size={20} weight="bold" />
</span>
Primary label alert - check out!
</p>
</div>
<div className="alert alert-label alert-label-secondary" role="alert">
<p className="mb-0 d-flex align-items-center gap-2">
<span className="label-icon label-icon-secondary">
<DownloadSimple size={20} weight="bold" />
</span>
Secondary label alert - check out!!
</p>
</div>
<div className="alert alert-label alert-label-success" role="alert">
<p className="mb-0 d-flex align-items-center gap-2">
<span className="label-icon label-icon-success">
<DownloadSimple size={20} weight="bold" />
</span>
Success label alert - check out!
</p>
</div>
</CardBody>
</Card>
We have Cookies! We use it to ensure you get the best experience on our website and service
Your order is delayed
New Version is now available
With this new Version you have accesss to more customization features and file export options.
Under maintenance
Our team is currently checking some errors in this area. We don't recommend changing any of your settings until the next update.
$ <Alert color="primary" dismissible>
<div className="d-flex justify-content-between">
<img src="/images/icons/cookie-.png" className="w-35 h-35 me-2" alt="icon" />
<p className="mb-0">We have Cookies! We use it to ensure you get the best experience on our website and service</p>
<button type="button" className="btn-close" aria-label="Close"></button>
</div>
</Alert>
<Alert className="alert-label alert-label-success">
<div className="d-flex justify-content-between align-items-center w-100">
<p className="mb-0 d-flex align-items-center gap-2">
<span className="label-icon label-icon-success">
{/* Icon Placeholder */}
</span>
Your order is delayed
</p>
<button className="btn btn-sm btn-success" >Accept</button>
</div>
</Alert>
<Alert className="alert-border-warning">
<h6>
{/* Icon Placeholder */} New Version is now available
</h6>
<p>With this new Version you have accesss to more customization features and file export options.</p>
<div className="text-end">
<a href="#" className="link-primary text-d-underline" >Don't allow</a>
<a href="#" className="link-primary text-d-underline ms-2">Allow</a>
</div>
</Alert>
<Alert className="custom-alert p-0">
<div className="alert-header">
<button type="button" className="btn-close" aria-label="Close"></button>
</div>
<div className="alert-body">
<h3 className="mb-3 text-center">
{/* Icon Placeholder */} Under maintenance
</h3>
<p className="mb-3">Our team is currently checking some errors in this area. We don't recommend changing any of your settings until the next update.</p>
<div className="text-end">
<a href="#" className="btn btn-warning">Get more info</a>
</div>
</div>
</Alert>Well done!
Aww yeah, you successfully read this important alert message. 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.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Heads up!
This is another alert. It demonstrates usage of spacing and content layout inside alerts.
Use margin utilities as needed.
Congratulations!
You’ve successfully triggered a success alert with additional content and a dismiss icon.
Feel free to customize this layout further.
<Card>
<CardHeader>
<h5>Alert Additional Content</h5>
</CardHeader>
<CardBody>
<Alert variant="primary">
<h3 className="alert-heading d-flex justify-content-between align-items-center">
Well done!
<X size={21} weight="bold" className="cursor-pointer" />
</h3>
<p>Aww yeah, you successfully read this important alert message. 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.</p>
<hr />
<p className="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</Alert>
<Alert variant="secondary">
<h3 className="alert-heading d-flex justify-content-between align-items-center">
Heads up!
<X size={21} weight="bold" className="cursor-pointer" />
</h3>
<p>This is another alert. It demonstrates usage of spacing and content layout inside alerts.</p>
<hr />
<p className="mb-0">Use margin utilities as needed.</p>
</Alert>
<Alert variant="success">
<h3 className="alert-heading d-flex justify-content-between align-items-center">
Congratulations!
<X size={21} weight="bold" className="cursor-pointer" />
</h3>
<p>You’ve successfully triggered a success alert with additional content and a dismiss icon.</p>
<hr />
<p className="mb-0">Feel free to customize this layout further.</p>
</Alert>
</CardBody>
</Card>