Alert Component
Six color variants in floating card and full-width banner styles with optional actions and close button.
Floating — all colors
Six color variants
Floating card style with title, description, and action.
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" />Floating — compact
Title-only, no actions
We've just released a new feature
<Alert Color="default"
Title="We've just released a new feature"
ShowActions="false" />Full-width banners
Edge-to-edge banner variant
Use Size="full-width" for app-level messages that span the viewport.
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" />Interactive — dismissible
Click the X to dismiss
The Alert component tracks dismissed state internally.
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" />