Text
A semantically correct text renderer that maps a visual type scale onto the right HTML element. Supports size, weight, alignment, colour, and ellipsis truncation.
When to use
Do
- ✓Use diwa-text for all body copy, captions, labels, and supporting text inside components.
- ✓Choose the tag prop based on semantics — use "p" for paragraphs, "span" for inline phrases, "label" for form labels.
- ✓Use size="medium" or "small" for the majority of body text — they match the base reading size.
- ✓Use color="secondary" or "tertiary" to de-emphasise supporting content.
- ✓Set ellipsis on text that must remain on a single line with constrained width.
Don't
- ✕Don't use diwa-text for headings — use semantic <h1-h6> elements or a dedicated heading component.
- ✕Don't pick a size purely for visual impact — choose the size that fits the content hierarchy.
- ✕Don't rely on the default "p" tag for inline text — use tag="span" to avoid block-level layout side effects.
- ✕Don't set color="inherit" unless the parent explicitly defines a colour you deliberately want to pass through.
- ✕Don't forget to constrain the host width before enabling ellipsis — without a max-width, the text will never truncate.
Size guidance
x-small (10px) — Timestamps, badges, helper text on dense controls.
small (12px) — Default body text. Captions, table cells, form descriptions.
medium (14px) — Slightly larger body text. Card content, list items, sidebar text.
large (16px) — Lead paragraphs, prominent descriptions, feature callouts.
x-large (18px) — Section subtitles or introductory sentences.
xx-large (20px) — Use sparingly — typically for sub-heading text below a heading tag.
Semantic tag guidance
p — Default. Use for standalone blocks of prose. Carries correct block-paragraph semantics.
span — Use inside other elements for inline styled text. Renders inline, does not create a new block context.
div — Generic block container. Use when neither p nor span fits (e.g. a text block that contains other blocks).
label — Associates the text visually and semantically with a form control. Always pair with a for/htmlFor attribute.
li — Use when rendering text inside a list context (diwa-text-list-item body text).