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.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
tag | 'p' | 'span' | 'div' | 'label' | 'li' | 'p' | HTML element rendered inside the shadow root. Choose based on semantic context. |
size | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'small' | Font size tier. Maps to the --diwa-font-size-* token scale. |
weight | 'regular' | 'semibold' | 'bold' | 'regular' | Font weight. |
align | 'start' | 'center' | 'end' | 'start' | Horizontal text alignment. start and end are RTL-aware. |
color | 'primary' | 'secondary' | 'tertiary' | 'inherit' | 'primary' | Colour alias. inherit passes through the surrounding text colour unchanged. |
ellipsis | boolean | false | Clips overflow text with a trailing ellipsis. The host must have a defined width. |
theme | 'dark' | 'light' | 'dark' | Per-component theme override. Sets data-theme on the host so token overrides cascade into the shadow DOM. |
Events
diwa-text is a non-interactive display component and emits no events.
Slots
| Slot | Description |
|---|---|
default | Text content. Can include inline HTML elements such as <strong>, <em>, or <a>. Do not slot block-level elements inside a span tag. |