Alert Component

We've just released a new feature

Lorem ipsum dolor sit amet consectetur adipisicing elit.

We've just released a new feature

Lorem ipsum dolor sit amet consectetur adipisicing elit.

We've just released a new feature

Lorem ipsum dolor sit amet consectetur adipisicing elit.

There was a problem with that action

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Just to let you know this might be a problem

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Successfully updated profile

Lorem ipsum dolor sit amet consectetur adipisicing elit.

@* Colors: default, brand, gray, error, warning, success *@
<Alert Color="brand"
       Title="We've just released a new feature"
       Description="Lorem ipsum dolor sit amet consectetur."
       ActionText="View changes" />

<Alert Color="error"
       Title="There was a problem with that action"
       Description="Lorem ipsum dolor sit amet consectetur."
       ActionText="Learn more" />

<Alert Color="success"
       Title="Successfully updated profile"
       Description="Lorem ipsum dolor sit amet consectetur."
       ActionText="View changes" />

We've just released a new feature

<Alert Color="default"
       Title="We've just released a new feature"
       ShowActions="false" />

We've just released a new feature

Lorem ipsum dolor sit amet consectetur.

We've just released a new feature

Lorem ipsum dolor sit amet consectetur.

There was a problem with that action

Lorem ipsum dolor sit amet consectetur.

Successfully updated profile

Lorem ipsum dolor sit amet consectetur.

<Alert Color="brand"
       Size="full-width"
       Title="We've just released a new feature"
       Description="Lorem ipsum dolor sit amet consectetur."
       ActionText="View changes" />

<Alert Color="error"
       Size="full-width"
       Title="There was a problem with that action"
       Description="Lorem ipsum dolor sit amet consectetur."
       ActionText="Learn more" />

This alert can be closed

Click the X button to dismiss this alert.

This error can be dismissed

Click dismiss or the X button.

<Alert Color="brand"
       Title="This alert can be closed"
       Description="Click the X button to dismiss this alert."
       ShowActions="false" />

<Alert Color="error"
       Title="This error can be dismissed"
       Description="Click dismiss or the X button."
       ActionText="Learn more" />

Alert Component

Floating — all colors

Floating — compact

Full-width banners

Interactive — dismissible