Color & background

TextBg sets a theme-color background together with a legible, contrasting text color in one step — the .text-bg-{color} helper. Each color pairs a solid fill with the #fff or #000 foreground Bootstrap chose for readable contrast.

Import

tsx

import { TextBg } from '@metatoy/bootstrap-styled';

Contextual colors

Set color to one of the eight theme colors. Light backgrounds get dark text; dark backgrounds get white text — the contrast pairing is baked in.

As any element

TextBg renders a <div> by default. Use as to render it as a <span> (for an inline label) or any other element.

Props

Prop	Type	Default	Description
color●	"primary" \| "secondary" \| "success" \| "danger" \| "warning" \| "info" \| "light" \| "dark"	—	One of the eight theme colors. Sets the background + a legible text color.
as	React.ElementType	—	—

TextBg forwards all native attributes and a ref to the underlying node.

Theming

TextBg reads --bs-{color}-rgb for the background triple and honors --bs-bg-opacity (default 1), so you can dim the fill with a scoped override:

tsx

<TextBg color="primary" style={{ ['--bs-bg-opacity']: 0.5 }}>
Half-opacity background
</TextBg>

The contrasting text color is the exact #fff / #000 value Bootstrap assigns per color and is inlined by the helper. Overriding --bs-{color}-rgb on an ancestor reshades every TextBg of that color beneath it.

Accessibility

The color pairings meet Bootstrap’s contrast targets out of the box. Remember that color alone carries no meaning to assistive tech — when the background communicates status (e.g. success vs. danger), make sure the text or an adjacent label states it too.

Explore in Ladle

Browse every color in the interactive component gallery: TextBg · Ladle ↗.