Text is not interactive; it sits in flow as a <span> (or the element given with render).
| State |
Support |
Visual change |
| Default |
Yes |
Type style and colour from size, weight and tone |
| Hover, pressed, focus, disabled, selected |
No |
None; Text is not interactive |
Truncated (truncate) |
Yes |
Ellipsis after 1-6 lines |
Long text, no truncate |
Yes |
The line wraps; the text is not cut |
| Size / weight |
Font / line height |
Type style |
sm / regular |
12 px / 16 px |
body-sm |
sm / medium |
12 px / 16 px |
label-sm |
md / regular |
14 px / 20 px |
body-md |
md / medium |
14 px / 20 px |
label-md |
lg / regular |
16 px / 24 px |
body-lg |
lg / medium |
None: no 16 px label token is defined |
- |
Margin is zero. numeric sets equal-width digits with tabular-nums. truncate uses line-clamp-1 to line-clamp-6.
Values show for the selected brand; change the brand from the top bar.
tone |
Token |
default |
color-text-default |
subtle |
color-text-subtle |
subtlest |
color-text-subtlest |
inverse |
color-text-inverse |
danger |
color-text-danger |
success |
color-text-success |
warning |
color-text-warning |
info |
color-text-info |
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-color-text-default | | #171717#171717#171717 | #fafafa#fafafa#fafafa |
--bigbang-color-text-subtle | | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 |
--bigbang-color-text-subtlest | | #525252#525252#525252 | #a1a1a1#a1a1a1#a1a1a1 |
--bigbang-color-text-inverse | | #ffffff#ffffff#ffffff | #171717#171717#171717 |
--bigbang-color-text-danger | | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb |
--bigbang-color-text-success | | #0e7644#0e7644#0e7644 | #a5e2b9#a5e2b9#a5e2b9 |
--bigbang-color-text-warning | | #8a5600#8a5600#8a5600 | #f7c790#f7c790#f7c790 |
--bigbang-color-text-info | | #0068a5#0068a5#0068a5 | #a9d7ff#a9d7ff#a9d7ff |
| Interaction |
Motion |
Reduced motion |
| Enter, exit, state change |
None: Text does not move; it only sets layout and typography |
Nothing to reduce |
See the Motion page for motion details.