UIToasts
A short message that appears over the page and goes away by itself: it confirms something that already happened.
A toast confirms an action without interrupting it: “Grades saved”, “Participant added”. It is temporary. If the user must act or the message must stay, use an alert or a modal.
When to use it
Use it
- One short sentence, in the past tense.
- An undo link when the action can be undone.
- Stack them in a corner, newest on top, and let each close by itself after a few seconds.
Don't
- Use a toast for an error the user has to fix.
- Put essential information in it: it may vanish before it is read.
- Show more than three at once.
Anatomy
A box (toast) with an optional header (toast-header: title, time, close) and a body (toast-body), placed in a container fixed to a corner of the screen.
Variants and states
This Moodle version has no dark mode: examples stay light.
Colours and icons
A role colours the accent bar (toast-success, toast-info, toast-warning, toast-danger) and a tile holds the icon, as in an alert. Use a button inside the toast only for what follows the message (Undo, Retry, Stay).
This Moodle version has no dark mode: examples stay light.
Solid and with a timer
A solid toast is for the confirmation that has to be seen from across the screen. A thin bar at the bottom shows how long it stays.
This Moodle version has no dark mode: examples stay light.
Combinations
| Combination | Use it for |
|---|---|
| Toast × result | A confirmation in the past tense (“Saved”). If the user has to act, it is an alert or a dialog. |
| Toast + action | One quiet action after the message (Undo); never more than one. |
| Colour × urgency | Success and info are polite (role="status"); warning and danger interrupt (role="alert"). |
| Toast + timer | A thin bar shows the time left; pause it on hover and focus. |
What Didactika changes and why
| What we changed | Why it helps |
|---|---|
| A card with a shadow, not a coloured box | It floats above the page as a temporary thing and does not look like part of the content. |
| The accent bar and the tile carry the colour | The kind of message is clear at a glance, and the text stays dark and readable. |
| Solid is kept for the strongest case | If every toast were filled, none would stand out. |
Classes
| Class | What it does |
|---|---|
toast, show |
The box, shown |
toast-header, toast-body |
Its two parts |
btn-closeclose |
Close button |
toast-container |
Positions a stack of toasts |
toast-success, toast-info, toast-warning, toast-danger |
Accent colour of the toast (Didactika) |
toast-solid |
A filled toast (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="status"(polite) for a confirmation,role="alert"for something urgent, witharia-atomic="true".- Give it enough time to be read, and pause the timer on hover and focus.
- Everything inside it is reachable with the keyboard.