Alerts are designed to inform you about important updates or changes on a page, drawing your attention without interrupting what you're currently doing.
Alert components make it easy to communicate important information to users while keeping the focus on their tasks. You can display alerts that grab attention without being intrusive. Additionally, these alerts can include an optional summary, providing users with a quick overview of the message.
When to use the Alert
Alerts are designed to highlight important information within a small text area, capturing the user's attention effectively. They can be particularly useful for displaying messages related to user interactions on the site, such as error or success notifications from form submissions. Additionally, alerts can provide contextual information relevant to the user's current activity, enhancing the overall experience.
Examples in GOSS products
- Each theme has a region close to the header that will display template errors as an alert component
- On submission of the Cookie Policy template article, informing the user that their preferences have been saved
- The iCM highlightbox inline when configured to display with an alert level
Accessibility considerations
The alert region is given an aria role of alert for assistive technology.
When the dismissible option is used, the alert's close button will have a minimum 44px square clickable region.
Basic alert
An alert with no additional configuration options.
By default, the alert displays HTML content within the message section.
<div class="alert" role="alert">
<div class="alert__message">
Basic alert content with no additional attributes with a <a href="#">link</a>
</div>
</div><comp:alert>
Basic alert content with no additional attributes with a <a href="#">link</a>
</comp:alert>@{
using (Html.Alert())
{
Basic alert content with no additional attributes with a <a href="#">link</a>
}
}Basic alert with a title
An alert with the title element.
<div class="alert__title">...</div>
This allow you to style all your alert headings the same using the alert__title class.
The element can be changed to be a heading element e.g. H2/H3 based on your structural needs.
<div class="alert" role="alert">
<div class="alert__title">
Basic alert title
</div>
<div class="alert__message">
Basic alert content with no additional attributes with a
<a href="#">link</a>
</div>
</div><comp:alert title="Basic alert title">
Basic alert content with no additional attributes with a
<a href="#">link</a>
</comp:alert>@{
using (Html.Alert(new AlertModel
{
HeadingLevel = 2,
HeadingText = "Basic alert title"
}))
{
<p>
Basic alert content with no additional attributes with a
<a href="#">link</a>
</p>
}
}Dismissible alert
An alert with a dismissable button option.
<button class="btn btn--icon-only btn--cancel" aria-label="Close this dismissable button alert" onclick="this.parentNode.parentNode.removeChild(this.parentNode);"></button>
By setting the dismissible attribute to true on the alert, the user can hide the alert from view once the user has read the message.
Review the aria-label to make sure the text makes sense to assistive technologies and is not to vague and explains which alert you are closing.
<div class="alert" role="alert">
<div class="alert__message">
This alert should be dismissible.
</div>
<button class="btn btn--icon-only btn--cancel" aria-label="Close this dismissable button alert" onclick="this.parentNode.parentNode.removeChild(this.parentNode);"></button>
</div><comp:alert dismissable="true">
This alert should be dismissible.
</comp:alert>@{
using (Html.Alert(new AlertModel
{
Dismissable = true
}))
{
<p>This alert should be dismissible.</p>
}
}Info alert
An alert with an info style applied
alert--info
By setting the alert--info class on the alert, you can to style all your info alert components the same as this class is also used in the forms designer for the Alert field type and within content for Highlight Box inlines.
Info alert with contrast style
An alert with info and contrast styles applied
alert--info alert--contrast
By setting the alert--info and alert--contrast classes on the alert, you add a stronger style to your info alerts for further emphasis. The contrast class is also available in the forms designer for the Alert field type and within content for Highlight Box inlines.
<div class="alert alert--contrast alert--info" role="alert">
<div class="alert__message">
This alert is an info alert with a contrast style.
</div>
</div><comp:alert level="info" modifiers="contrast">
This alert is an info alert with a contrast style.
</comp:alert>@{
using (Html.Alert(new AlertModel
{
Level = "info",
Modifiers = new string[] { "contrast" }
}))
{
<p>This alert is an info alert with a contrast style.</p>
}
}Warning alert
An alert with a warning style applied
alert--warn
By setting the alert--warn class on the alert, you can to style all your warning alert components the same as this class is also used in the forms designer for the Alert field type and within content for Highlight Box inlines.
<div class="alert alert--warn" role="alert">
<div class="alert__message">
This alert is a warning alert.
</div>
</div><comp:alert level="warn">
This alert is a warning alert.
</comp:alert>@{
using (Html.Alert(new AlertModel
{
Level = "warn"
}))
{
<p>This alert is a warning alert.</p>
}
}Warning alert with contrast style
An alert with warning and contrast styles applied
alert--warn alert--contrast
By setting the alert--warn and alert--contrast classes on the alert, you add a stronger style to your warning alerts for further emphasis. The contrast class is also available in the forms designer for the Alert field type and within content for Highlight Box inlines.
<div class="alert alert--warn alert--contrast" role="alert">
<div class="alert__message">
This alert is a warning alert with a contrast style.
</div>
</div><comp:alert level="warn" modifiers="contrast">
This alert is a warning alert with a contrast style.
</comp:alert>@{
using (Html.Alert(new AlertModel
{
Level = "warn",
Modifiers = new string []{ "contrast" }
}))
{
<p>This alert is a warning alert with a contrast style.</p>
}
}Success alert
An alert with a success style applied
alert--success
By setting the alert--success class on the alert, you can to style all your success alert components the same as this class is also used in the forms designer for the Alert field type and within content for Highlight Box inlines.
<div class="alert alert--success" role="alert">
<div class="alert__message">
This alert is a success alert.
</div>
</div><comp:alert level="success">
This alert is a success alert.
</comp:alert>@{
using (Html.Alert(new AlertModel
{
Level = "success"
}))
{
<p>This alert is a success alert.</p>
}
}Success alert with contrast style
An alert with success and contrast styles applied
alert--success alert--contrast
By setting the alert--success and alert--contrast classes on the alert, you add a stronger style to your success alerts for further emphasis. The contrast class is also available in the forms designer for the Alert field type and within content for Highlight Box inlines.
<div class="alert alert--success alert--contrast" role="alert">
<div class="alert__message">
This alert is a success alert with a contrast style.
</div>
</div><comp:alert level="success" modifiers="contrast">
This alert is a success alert with a contrast style.
</comp:alert>@{
using (Html.Alert(new AlertModel
{
Level = "success",
Modifiers = new string[] { "contrast" }
}))
{
<p>This alert is a success alert with a contrast style.</p>
}
}Error alert
An alert with an error style applied
alert--error
By setting the alert--error class on the alert, you can to style all your info alert components the same as this class is also used in the forms designer for the Alert field type and within content for Highlight Box inlines.
<div class="alert alert--error" role="alert">
<div class="alert__message">
This alert is an error alert.
</div>
</div><comp:alert level="error">
This alert is an error alert.
</comp:alert>@{
using (Html.Alert(new AlertModel
{
Level = "error"
}))
{
<p>This alert is an error alert.</p>
}
}Error alert with contrast style
An alert with error and contrast styles applied
alert--error alert--contrast
By setting the alert--error and alert--contrast classes on the alert, you add a stronger style to your error alerts for further emphasis. The contrast class is also available in the forms designer for the Alert field type and within content for Highlight Box inlines.
<div class="alert alert--error alert--contrast" role="alert">
<div class="alert__message">
This alert is an error alert with a contrast style.
</div>
</div><comp:alert level="error" modifiers="contrast">
This alert is an error alert with a contrast style.
</comp:alert>@{
using (Html.Alert(new AlertModel
{
Level = "error",
Modifiers = new string[] { "contrast" }
}))
{
<p>This alert is an error alert with a contrast style.</p>
}
}Combination alert
An alert with Heading 3 title, HTML content, success and contrast styles applied and a dismiss able button option.
Alert title
<div class="alert alert--contrast alert--success" role="alert">
<h3 class="alert__title">Alert title</h3>
<div class="alert__message">
<p>Paragraph tag. <a href="#">Hyperlink</a></p>
<p>Paragraph tag following paragraph.</p>
<ul>
<li>List and list item following paragraph.</li>
<li>Second list item.</li>
</ul>
<p>Paragraph tag following list.</p>
<ul>
<li>
<p>List item containing paragraph tags.</p>
<p>Second paragraph tag.</p>
</li>
</ul>
</div>
<button class="btn btn--icon-only btn--cancel" aria-label="Close this alert" onclick="this.parentNode.parentNode.removeChild(this.parentNode);"></button>
</div><comp:alert title="Alert title" headingLevel="3" level="success" modifiers="contrast" dismissable="true">
<p>Paragraph tag. <a href="#">Hyperlink</a></p>
<p>Paragraph tag following paragraph.</p>
<ul>
<li>List and list item following paragraph.</li>
<li>Second list item.</li>
</ul>
<p>Paragraph tag following list.</p>
<ul>
<li>
<p>List item containing paragraph tags.</p>
<p>Second paragraph tag.</p>
</li>
</ul>
</comp:alert>@{
using (Html.Alert(new AlertModel
{
Level = "success",
Modifiers = new string[] { "contrast" },
Dismissable = true
}))
{
<p>Paragraph tag. <a href="#">Hyperlink</a></p>
<p>Paragraph tag following paragraph.</p>
<ul>
<li>List and list item following paragraph.</li>
<li>Second list item.</li>
</ul>
<p>Paragraph tag following list.</p>
<ul>
<li>
<p>List item containing paragraph tags.</p>
<p>Second paragraph tag.</p>
</li>
</ul>
}
}Share this page
