The Error Panel highlights one or more error messages, which can also include links and additional help text to guide users toward appropriate next steps.
It’s especially helpful to summarize multiple errors in a form to help users understand what went wrong at a glance, and quickly find and remedy the individual inline errors.
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Icon |
Visual indicator to communicate context and severity at a glance. |
No |
|
2. Title |
A concise summary in a few words to understand the error(s) at a glance. |
No |
|
3. Description |
Bullet list of one or more error messages. |
Yes |
|
4. Description link |
Link to additional information related to a specific error message, like help docs, to guide users towards appropriate next steps. |
Yes |
|
5. Help text |
Additional text to communicate additional context or relevant helpful information. |
Yes |
|
6. Help link |
Link to additional information related to the help text, like help docs, to guide users towards appropriate next steps. |
Yes |
|
7. Highlight border |
Visual indicator to anchor callout and communicate context and severity at a glance. |
No |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| hasDescription Boolean | true | false | true |
| hasHelpText Boolean | true | false | true |
| ↳ has HelpLink Boolean | true | false | true |
Component dependencies
This component is internally dependent on the following components:
Link
Links navigate users to a different page, section, or external page.
Actionable Callout
Actionable Callout highlights information, prompts users to take action, or provides feedback after a user action.
Help and support