UIAlerts
A message inside the page that tells the user what happened or what to know, with a colour that says how important it is.
An alert is a message in the flow of the page: a result, a warning or a tip. It stays until the situation changes or the user dismisses it. For something temporary, use a toast.
When to use it
Use it
- Say what happened and what to do, in one or two sentences.
- Pick the colour by meaning: success, info, warning, danger.
- An icon of Moodle that matches the meaning, and a heading only when the message needs one.
- A link or button for the next step.
Don't
- Use colour as the only signal: the text and the icon say it too.
- Stack several alerts; merge them into one.
- Use danger for what is not an error or a risk.
- Auto-hide a message the user needs to read.
Anatomy
A box (alert and a colour) with optional icon, heading (alert-heading), text, links (alert-link) and a close button when it is dismissible.
Variants and states
This Moodle version has no dark mode: examples stay light.
Styles
The default is a soft tint of the colour with an accent bar on the left. Didactika adds three more for the other needs: flat (no bar, for dense places), outline (the lightest) and solid (the strongest, for the one message that must not be missed).
This Moodle version has no dark mode: examples stay light.
Icon, heading and actions
An icon goes in a tile (dd-tile), which takes the colour of the alert. A heading names the message, the text says what to do, and the actions are buttons of the same colour.
Backup finished
The course was saved. You can download the file for 7 days.
Heads up
Changing the enrolment key affects everyone who has not enrolled yet.
We could not send the message
Check the address and try again. Nothing was saved.
This Moodle version has no dark mode: examples stay light.
Dismissible
This Moodle version has no dark mode: examples stay light.
Combinations
| Combination | Use it for |
|---|---|
| Colour × meaning | Success for what finished, info for what to know, warning for what to check, danger for what failed. Primary, secondary, light and dark are neutral notices. |
| Style × weight | Soft by default; flat in dense places; outline when it must not weigh on the page; solid for the one message that cannot be missed. |
| Icon + heading + actions | A tile with an icon, a heading, one or two sentences and the next step as a button or link. |
| Alert × dismissible | Only if the message does not come back with the page; close button at the right. |
What Didactika changes and why
| What we changed | Why it helps |
|---|---|
| A tint, a line and a text colour derived from the role | Every role reads at 4.5:1 or more, and the message is told by the words, the icon and the bar, not only by the colour. |
| Light, secondary and dark are three clear steps | Light is the quietest, dark is the strongest, secondary sits between: they never swap places. |
| The icon lives in a tile of the alert’s colour | The eye lands on the tile first and knows the kind of message before reading it. |
| The accent bar on the left | It marks the message without a heavy border, and it is the part of the alert that stays when the tint is lost in a dark theme. |
Classes
| Class | What it does |
|---|---|
alert |
Base |
alert-primary, alert-secondary, alert-success, alert-danger, alert-warning, alert-info, alert-light, alert-dark |
Colour by meaning |
alert-heading, alert-link |
Heading and link that match the colour |
alert-dismissible, btn-closeclose |
Lets the user close it |
fade show |
Animates when it appears and when it closes |
alert-flat, alert-outline, alert-solid |
Styles of the alert: no bar, outline only and filled (Didactika) |
dd-tile |
The tile that holds an icon; it takes the colour of the alert around it (Didactika) |
In this version
Bootstrap 5.3 keeps its colours in CSS variables (--bs-*), so a theme recolours the component with one variable.
Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet.
Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet.
Accessibility
role="alert"for something that must be read now;role="status"for something polite.- The close button has an
aria-label. - Contrast of the text against the tint is at least 4.5:1.
- Never rely on colour alone: use words and an icon.