UIButtons
The buttons of the theme, untouched. One main action per area, danger for what removes, an icon only where the icon table has one.
A button starts an action. It is the same component in every plugin: the one of the theme, with its own classes, never redrawn by a plugin. Only the chrome of a list (the toolbar over a table) rounds its buttons, and it does so with a layer class, not by restyling .btn.
When to use it
Use it
btn-primaryfor the main action of a page, a form or a dialog. One per area.btn-secondaryorbtn-outline-secondaryfor the others: Cancel, Import, Export.btn-dangerfor what deletes or stops, also on the confirm button of its dialog.- An icon before the text when the action has one in the icon table; an icon-only button always has a title and a hidden label.
Don't
- Redraw buttons in a plugin: colours, radius, padding or weight.
- Put two primary buttons side by side.
- Use a link styled as a button to submit a form, or a button to navigate.
- Use red for anything that does not remove or stop.
Anatomy
A button has a label (text, or an icon with a hidden label), an optional icon before the label, and a colour that says what it does. There is no trailing icon.
Variants and states
Every colour against every state. Hover and focus are forced from the version’s own CSS, so what you see is what a user sees.
This Moodle version has no dark mode: examples stay light.
This Moodle version has no dark mode: examples stay light.
This Moodle version has no dark mode: examples stay light.
Sizes
This Moodle version has no dark mode: examples stay light.
Use the default size almost everywhere. Small belongs in dense places (a floating bar, a row of a table); large only for a call to action on an empty page.
With icons and in groups
This Moodle version has no dark mode: examples stay light.
Icons are written with the Moodle icon id ({{#pix}}t/add, core{{/pix}} in a template, pix_icon('t/add', ...) in PHP), never with a Font Awesome class: each Moodle version draws the same id with its own font. Switch the version above and the icons change.
This Moodle version has no dark mode: examples stay light.
This Moodle version has no dark mode: examples stay light.
Icon buttons with a count
A button that holds only an icon is always a circle. A count on its corner (badge-float) tells how many things wait behind it; with no number the badge becomes a dot that only says something is new. The count never replaces the label of the button: it still has a title and an aria-label that include the number.
This Moodle version has no dark mode: examples stay light.
Tonal and plain buttons
Between the filled button and the outline there is a tonal one (btn-tonal): a soft tint of the colour of the role behind the label. It is for actions that matter but must not compete with the main one. An icon button comes in four weights, from the strongest to the quietest: filled, tonal, outline and plain (btn-link btn-icon); pick the one that matches the weight of the action in its row.
This Moodle version has no dark mode: examples stay light.
Combinations
| Combination | Use it for |
|---|---|
| Size × colour | Small in toolbars and table rows, default everywhere else, large for one call to action. The size never changes the colour or the label. |
| Filled × outline × link | Filled for the main action, outline for the secondary ones, link for the quietest. One filled button per area. |
| Icon + label | The icon goes before the label, for actions that have one in the icon table. In dense places use an icon-only button (btn-icon), always with a title and an aria-label. |
| Group | A choice between views (grid, list, map) or a split button (Save with its menu). The ends are round and the joins square. |
| Button + badge | A count inside the button (“Messages 4”). Never a sentence. |
What Didactika changes and why
| What we changed | Why it helps |
|---|---|
| A rounded rectangle (8 px radius), 36 px tall, with more padding at the sides than above and below | It reads as clickable, keeps the label centred and is a step rounder than the square buttons of Bootstrap without turning into a pill. |
| Outline and link buttons answer with a tint of their own colour | Bootstrap floods them with solid colour on hover and the label turns white on a light page. A tint keeps the label readable and shows the pressed state without shouting. |
Icon-only buttons are always round (btn-icon) |
The target has the same height and width and no corners to catch the eye, so a row of icon actions lines up and is easy to hit. |
| One focus ring of 3 px for every button | A keyboard user always sees where they are, with the same cue they get in fields and links. |
| A group is one piece and the toggle of a split button closes it | The group reads as one control instead of two buttons that happen to touch. |
Classes
| Class | What it does |
|---|---|
btn |
Base of every button |
btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, btn-dark |
Colour by meaning |
btn-outline-* |
Outlined variant for secondary actions |
btn-link |
Looks like a link, acts like a button |
btn-sm, btn-lg |
Smaller and larger |
btn-group |
Joins related buttons |
d-grid gap-2btn-block |
Full-width stack |
btn-closeclose |
Close button inside alerts and modals, written by Moodle |
btn-tonal |
A soft tint of the colour of the role instead of a filled background (Didactika) |
btn-icon |
Round button that holds only an icon. Add btn-sm or btn-lg for the other sizes (Didactika) |
In this version
Bootstrap 5.3 draws the focus ring as a soft shadow around the button and sets the colours of each button through CSS variables (--bs-btn-*), which is what lets a theme recolour a button with one variable. Icons are drawn with Font Awesome 6.
Bootstrap 4.6 gives each button fixed colours and draws the focus as a coloured shadow, so a theme recolours a button by compiling its colours. Icons are drawn with Font Awesome 6.
Bootstrap 4.6 gives each button fixed colours and draws the focus as a coloured shadow, so a theme recolours a button by compiling its colours. Icons are drawn with Font Awesome 4.7.
Accessibility
- A
buttonfor an action and anafor navigation; never the other way round. - An icon-only button has
titleandaria-label(or a hidden text). disabledremoves it from the tab order; usearia-disabledonly when the reason must stay readable by keyboard users.- Pressed state of a toggle:
aria-pressed. - Contrast of the label against the colour meets 4.5:1 in every theme colour of Moodle; a theme that changes the colours has to keep that.