This component is for when the system needs to inform the user of a given situation or state.
Alert ribbons can stay constantly visible, or if the issue is something that can be resolved by the user, a call to action (button, x or a link) may be included to dismiss the message.
Types of alerts
There are four types of alerts.
1. Information: grey
Used for informative guiding messages, sometimes proactive advice.
2. Success: green
Indicates that an action processed successfully, or that there are no account-related issues. Typically used when there is no need for a printed receipt.
3. Warning: yellow
A warning, that you may disregard from, but it may influence the experience. Gives the user a hint about a condition or situation that needs attention from the user.
4. Critical & Error: red
A critical warning that you may not disregard and requires the full attention. The user usually has to act or they will probably not be able to use the function.
Generally, there are four types of placements that depends on the context; global, page, group and specific. The rule is to simply place the alert near the issue that triggered it.
Alert is placed at the top under the header. Is typically a system notice (i.e "Maintenance").
Alert is placed at the top of the page. Is typically a function notice (i.e "Bankgiro is down").
Alert is placed in the module. Is typically a notice related to the module (i.e "Transaction listing is unavailable").
Alert is placed in the content (table, etc) in the module. Is typically a notice related to the content (i.e "Negative balance").
Do's and don'ts
- Be specific and short in the actual message
- Place the alert near the context of what is triggered the alert
- Urge the user to take action if needed
- Add an icon to enforce the message (optional)
- Overwhelm the user with multiple alerts of the same severity. Group them if possible.
Above: Information alert ribbon
Above: Warning alert ribbon
Simular to Toast notifications
To make the icons clear on coloured backgrounds, use "solid" FontAwesome icons:
- Information - "info-square"
- Success - "check"
- Warning - "exclamation-square"
- Alert - "exclamation-square"
Information alert ribbon
Background colour: Grey 8/#E6E6E6 on white background or Grey 2/#333333 on dark background.
Success alert ribbon
Background colour: Dark Green 2/#379D00
Warning alert ribbon
Background colour: Yellow/#FFC500
Critical information and error alert ribbon
Background colour: Dark Red 1/#D81A1A