Component Label

Label

Semantic text with common variants.

Label is the most common text primitive in Yororen UI. It supports common “tones” like muted/strong as well as truncation.

Example

use yororen_ui::component::label;

let view = label("Muted").muted(true);
let strong = label("Strong").strong(true);

When to use

• Body text and secondary text in settings/list rows
• Muted helper text (with .muted(true))
• Monospace labels (file paths, ids) with .mono(true)

API

• label("..."): constructor
• id(...): stable identity
• muted(bool): use theme.content.secondary
• strong(bool): semibold
• inherit_color(bool): do not set a default color (use parent)
• mono(bool): use monospace font
• ellipsis(bool): single-line truncation
• wrap(): enable automatic text wrapping
• lines(usize): clamp to max lines
• preview_lines(usize): clamp a multi-paragraph preview to max lines and append ⋯

Defaults

• Color: theme.content.primary
• If muted(true): theme.content.secondary
• Strong: semibold

Tips

• Use ellipsis(true) for single-line rows in VirtualList.
• Use lines(n) for multi-line secondary text that still needs clamping.
• Use preview_lines(n) for previews of long / multi-paragraph content that opens in a modal.
• Use wrap() for descriptions that need to wrap to multiple lines. Requires parent container with w_full().

Example: Ellipsis and line clamping

use yororen_ui::component::label;

let single_line = label("A very long title").ellipsis(true);
let two_lines = label("A longer description that can wrap").lines(2);

let preview = label("Paragraph 1\n\nParagraph 2")
    .whitespace_normal()
    .preview_lines(3);

Example: Automatic text wrapping

use yororen_ui::component::label;

let wrapping_description = label("A long description that should wrap to multiple lines when it exceeds the container width")
    .wrap();

Notes

• inherit_color(true) is useful when placing a label inside a button that already sets text_color.