Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Alerts are available to any length of text. You can use title and text at the same time.

Component NameDevelopment Status
AlertDONE

Examples

You can find all examples for components developed in this module here.

Basic Alert Example

Very basic Alert component examples.

Aww yeah, you successfully read this important alert message.

Alert Variants

Alert have contextual variants.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Advanced Alert Examples

Here are some advanced alert examples.

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.

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.

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.

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.

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.

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.

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.

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.

Property NameTypeDescription
variant - 'info'enum
title - nullnode
text - nullnode
hasIcon - falsebool
isRemovable - falsebool
onRemovefunc