UIBadges
A small label that counts something or names a status, next to the thing it describes.
A badge is a short label: a count (4 messages) or a status (Completed, Hidden). It sits next to a title, a button or a row, and it is read together with it.
When to use it
Use it
- One or two words, or a number.
- Use pills (
rounded-pill) for statuses and counters. - Pick the colour by meaning and keep the same one for the same status everywhere.
Don't
- Write sentences in a badge.
- Use badges as buttons.
- Use many colours in one list: it stops meaning anything.
Anatomy
A badge with a background colour and text that contrasts with it. Inside a button it keeps its colour and gets a small gap.
Variants and states
Filled
This Moodle version has no dark mode: examples stay light.
Soft, outline and with a dot
Didactika adds the variants most statuses need. Soft (badge-soft) is the tint of the colour and is the one to use in lists; outline (badge-outline) is the quietest; a dot (badge-dot) turns a badge into a status.
This Moodle version has no dark mode: examples stay light.
Sizes
This Moodle version has no dark mode: examples stay light.
In context
Algebra I New
This Moodle version has no dark mode: examples stay light.
Combinations
| Combination | Use it for |
|---|---|
| Soft × list | Statuses in a table or a list: soft with a dot and a pill shape (“Active”, “Pending review”). |
| Filled × count | Counters on buttons and icons: filled, in a pill, in danger when it asks for attention. |
| Outline × secondary | A tag that describes without alerting (a category, a version). |
| Badge + icon | An icon before the text for a status that has one (Completed with a check). Not both an icon and a dot. |
| Badge × corner | A counter on the corner of an icon button or an avatar (badge-float inside position-relative). |
What Didactika changes and why
| What we changed | Why it helps |
|---|---|
| Soft is the default for statuses | A page full of filled badges shouts; tints let the eye read the rows and still see which one is “Pending”. |
| The text colour is derived from the role | A soft badge keeps 4.5:1 whatever the colour of the theme, which a fixed pastel cannot. |
| The dot repeats the colour in a shape | The status is not only a colour: the dot plus the word says it twice. |
| Corner counters have a ring of the page colour | The count stays readable over any icon. |
Classes
| Class | What it does |
|---|---|
badge |
Base |
text-bg-primary, text-bg-success…badge-primary, badge-success… |
Colour and text colour together |
rounded-pill |
Fully rounded |
badge-soft, badge-outline |
Tinted and outlined badge, with the role colour (Didactika) |
badge-dot |
A status dot before the text (Didactika) |
badge-sm, badge-lg |
Smaller and larger badge (Didactika) |
badge-float |
A counter on the corner of its parent (Didactika) |
In this version
Bootstrap 5.3 keeps its colours in CSS variables (--bs-*), so a theme recolours the component with one variable. The colour and the text colour come together in text-bg-*.
Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet. The colour is badge-* and the pill is badge-pill (rounded-pill also works).
Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet. The colour is badge-* and the pill is badge-pill (rounded-pill also works).
Accessibility
- A count should say what it counts: add visually hidden text (“unread messages”).
- The contrast of the text against the colour is at least 4.5:1: use
text-bg-*, which picks it. - A status is also written, not only coloured.