pub enum BadgeFill {
TextBg,
Bg,
Subtle,
None,
}Expand description
How a badge takes its colour.
Bootstrap 5.3 offers three distinct colour idioms for a badge, and they are
not interchangeable. text-bg-* sets a background and a contrasting
foreground; bg-* sets only the background and lets the text colour be
inherited; the subtle pair is a background and text colour that are designed
together. Without this choice a caller can only get the first, and reaching
for the others means hand-writing the classes the component exists to type.
§Bootstrap HTML → Dioxus
| HTML class | Dioxus |
|---|---|
badge text-bg-primary | Badge { color: Color::Primary } |
badge bg-secondary | Badge { color: Color::Secondary, fill: BadgeFill::Bg } |
badge bg-info-subtle text-info-emphasis | Badge { color: Color::Info, fill: BadgeFill::Subtle } |
badge | Badge { fill: BadgeFill::None } |
Variants§
TextBg
text-bg-<color> — background plus contrasting text. Bootstrap’s badge
helper, and the default, so omitting the prop changes nothing.
Bg
bg-<color> — the background utility alone, text colour inherited.
Subtle
bg-<color>-subtle text-<color>-emphasis — Bootstrap’s low-contrast
pair. Both classes together: the subtle background is near-invisible
without its matching emphasis foreground, so this is one idiom rather
than two utilities a caller should have to remember to combine.
None
No colour idiom — a bare badge, the chip geometry only. Use this when
painting the background yourself: text-bg-* also sets a foreground, so
an inline background override would otherwise inherit a text colour it
never asked for.