View in Storybook
Anatomy
To describe the status of an individual element, such an item in a list or a row in a table.
- iconLeft: To support the type of status being displayed.
- Text: The label of a status.
- Link (optional): When there is additional information attributed to a status alert.
Types
The type of status is identified by colour and icon used, in the same way as our other Alert components.
|
Default
For generic messaging that does not affect any user interaction. |
|---|
|
Info
Related to specific users or actions that are about to be performed. |
|---|
|
Success
Displayed when showing successful inline user actions. |
|---|
|
Warning
Used when an selection is made that could affect an overall action. |
|---|
|
Error
When an error has occured from a user or action failure. |
|---|
Usage
Our status is always placed within the context of the specific content it is related to. This gives the user an instant alert to any action that has taken place or loading.
Best practice
- Provide short, to-the-point messaging that is clear to the user on what action to take if necessary.
- Automatically be visible upon a form input that is not valid.
- Disappear once the input is valid or the user has remedied the issue.
- Not be placed out of context of the input or group of inputs they describe.
Do's and Don'ts
|
Do |
Don't |
|---|---|
|
✅ Clearly explain why the status alert is being displayed. |
🚫 Display a inline status away from the input or action it is related to. |
|
✅ Provide a way to fix the issue or a next step. |
|