Overview
Overview
An in-page alert is used to inform users about essential updates or modifications on a page - capturing their attention without disrupting their ongoing task
Usually positioned at the top of a page after a submit action, these alerts are designed to be noticeable yet unobtrusive.
There are four types of in-page alerts in the Design System including:
- information
- success
- error
- warning.
Information
This is for things you should know, but they're not super important. They can be helpful tips or messages that don't need a lot of attention. In general, they're used for time-sensitive information.
<!-- Main container for the page alert with role 'region' and an accessible label 'Information' -->
<div role="region" aria-label="Information" class="qld__page-alerts qld__page-alerts--svg qld__page-alerts--info">
<!-- Container for the alert icon -->
<div class="qld__page-alerts__icon">
<!-- SVG icon representing the alert, labeled as 'Information' for accessibility -->
<svg aria-label="Information" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm">
<!-- Reference to an external SVG file for the icon -->
<use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#alert-information"></use>
</svg>
</div>
<!-- Heading for the alert message -->
<h2 class="qld__page-alerts--heading qld__display-lg">Information title</h2>
<!-- Content for the alert, including a paragraph with a link -->
<div>
<p>This is info <a href="#">link</a></p>
</div>
</div>
Success
The success page alert is used for notifying the user they did something right or an action was successful, like submitting a form.
<!-- Main container for the success alert with role 'region' and an accessible label 'Success' -->
<div role="region" aria-label="Success" class="qld__page-alerts qld__page-alerts--svg qld__page-alerts--success">
<!-- Container for the success alert icon -->
<div class="qld__page-alerts__icon">
<!-- SVG icon representing the success state, labeled as 'Success' for accessibility -->
<svg aria-label="Success" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm">
<!-- Reference to an external SVG file for the success icon -->
<use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#alert-success"></use>
</svg>
</div>
<!-- Heading for the success message -->
<h2 class="qld__page-alerts--heading qld__display-lg">Success title</h2>
<!-- Content for the success alert, including a paragraph with a link -->
<div>
<p>This is success <a href="www.google.com">link</a></p>
</div>
</div>
Error
The error page alert should be used with form validation errors or other errors that will block the user from completing their task. This is for when something really bad happens, like the website crashing.
Error Title
This is error
<!-- Main container for the error alert with role 'region' and an accessible label 'Error' -->
<div role="region" aria-label="Error" class="qld__page-alerts qld__page-alerts--svg qld__page-alerts--error">
<!-- Container for the error alert icon -->
<div class="qld__page-alerts__icon">
<!-- SVG icon representing the error state, labeled as 'Error' for accessibility -->
<svg aria-label="Error" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm">
<!-- Reference to an external SVG file for the error icon -->
<use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#alert-error"></use>
</svg>
</div>
<!-- Heading for the error message -->
<h4 class="qld__page-alerts--heading qld__display-lg">Error Title</h4>
<!-- Content for the error alert, including a paragraph with the error message -->
<div>
<p>This is error</p>
</div>
</div>
Warning
Use warning page alerts to tell the user something urgent. Only use an alert if the information will help the user avoid a problem. This style of alert is used to warn you about something that might go wrong, like your password expiring.
Warning
This is warning
<!-- Main container for the warning alert with role 'region' and an accessible label 'Warning' -->
<div role="region" aria-label="Warning" class="qld__page-alerts qld__page-alerts--svg qld__page-alerts--warning">
<!-- Container for the warning alert icon -->
<div class="qld__page-alerts__icon">
<!-- SVG icon representing the warning state, labeled as 'Warning' for accessibility -->
<svg aria-label="Warning" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm">
<!-- Reference to an external SVG file for the warning icon -->
<use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#alert-warning"></use>
</svg>
</div>
<!-- Heading for the warning message -->
<h2 class="qld__page-alerts--heading qld__display-lg">Warning</h2>
<!-- Content for the warning alert, including a paragraph with the warning message -->
<div>
<p>This is warning</p>
</div>
</div>
Usage guidelines
When to use
- To notify users of important information or changes that require their attention that are unique to the content of a particular page
- To provide feedback on user actions, such as confirming that a form was successfully submitted, or notifying users that on errors within a form
- To warn users of potential consequences or risks of an action
When not to use
- For trivial or non-urgent information that doesn't require immediate action or attention, such as general news or updates
- To promote products or services or for advertising purposes
- To interrupt users unnecessarily or distract them from the task at hand
How to use them
In-page alerts are a way to get a user's attention on a webpage. They usually pop up after you do something on the page or when something important happens. It's important to use alerts correctly so that people pay attention to them.
Make sure to use the right kind of alert for the right situation, and give enough information to help people understand what's going on. Don't use critical alerts for little things like validating information.
Here are some tips.
Do
- Use simple language that's easy to understand
- Show the alerts at the right time and in the right place
- Use the right type of alert for what you need it for
- Use an alert title to accompany the alert text
Don't
- Use too many alerts, or people will start to ignore them
- Use alerts that show up on every page