--- layout: default permalink: /alerts category: components title: Alerts description: "Alerts or dialogs inform users about a task, system states and user actions, can contain critical information, require decisions or involve multiple tasks.

With personalization, you add a little emotional weight to the information, from warnings to a critical failure of the system or from the success of an operation to neutral information." ---

{{page.title}} Component

{{page.description}}



Observations

This section shows how to create an alert of each type, using only one color as an example. If you want to see all the colors then go to the previews of the alerts.

Default


Consectetur adipiscing elit lorem ipsum dolor.
{% highlight html %}
Consectetur adipiscing elit lorem ipsum dolor.
{% endhighlight %}

With any color


Consectetur adipiscing elit lorem ipsum dolor.
Consectetur adipiscing elit lorem ipsum dolor.
{% highlight html %}
Consectetur adipiscing elit lorem ipsum dolor.
Consectetur adipiscing elit lorem ipsum dolor.
{% endhighlight %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
{% highlight html %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
{% endhighlight %}

Status


Hi, I'm success.
Hi, I'm warning.
Hi, I'm danger.
Hi, I'm info.
{% highlight html %}
Hi, I'm success.
Hi, I'm warning.
Hi, I'm danger.
Hi, I'm info.
{% endhighlight %}

Snack


Hi, I'm success.
Hi, I'm warning.
Consectetur adipiscing elit lorem ipsum dolor.
Consectetur adipiscing elit lorem ipsum dolor.
{% highlight html %}
Hi, I'm success.
Hi, I'm warning.
Consectetur adipiscing elit lorem ipsum dolor.
Consectetur adipiscing elit lorem ipsum dolor.
{% endhighlight %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
{% highlight html %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
{% endhighlight %}

Rounded Alerts


Hi, I'm success.
Hi, I'm warning.
Consectetur adipiscing elit lorem ipsum dolor.
Consectetur adipiscing elit lorem ipsum dolor.
{% highlight html %}
Hi, I'm success.
Hi, I'm warning.
Consectetur adipiscing elit lorem ipsum dolor.
Consectetur adipiscing elit lorem ipsum dolor.
{% endhighlight %}

With buttons


Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
{% highlight html %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
{% endhighlight %}

With title


Lorem ipsum dolor?

Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

Lorem ipsum dolor?

Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
{% highlight html %}

Lorem ipsum dolor?

Lorem ipsum dolor sit amet, Pellentesque risus mi, tempus quis placerat ut, porta nec nulla.

Lorem ipsum dolor?

Lorem ipsum dolor sit amet, Pellentesque risus mi, tempus quis placerat ut, porta nec nulla.
{% endhighlight %}