TextLabel

Usage

• Use TextLabel for form control labels — pair it with a TextField, Select, Checkbox, or other input to provide a visible, accessible label.
• Use TextLabel for key-value metadata inside a description list to label read-only data such as account settings or profile fields.
• Use TextLabel for inline metadata — short contextual details like timestamps, categories, or counts alongside other content.
• Use Text directly with the appropriate text style when none of those contexts apply.

Appearance

• Color (color) — defaults to subtle so labels stay subordinate to the content they describe.
• Override color with any color inherited from Text when a semantic need requires it.
• Typography (text) — defaults to the product-label text style: xxs font size, medium weight, subtle letter spacing.
• Override typography with the size, weight, family, and fontStyle props inherited from Text.

Content

• Limit labels to one to three words.
• Provide extra context with a help Icon and Tooltip, or a description below the label. Never extend the label text to carry instructions or explanations.
• Phrase labels as direct questions when the associated control answers a yes-or-no question or asks the user to choose between options — common for Toggle, RadioGroup, and Select.

Implementation Notes

• TextLabel renders a <label> by default. Change the element with the polymorphic as prop (React) or @as arg (Ember) — for example as="dt" for description lists or as="span" for inline metadata.
• Pass content as children in React and through the default block ({{yield}}) in Ember.
• TextLabel wraps Text, so every Text prop (text, size, weight, color, family, fontStyle) and the Box props Text extends are available.
• text and color are defaults, not locks — passing either replaces product-label or subtle.
• variant is deprecated in both frameworks. Never emit it; the component supports only the single default label style. The old variant="secondary" mapped to the product-label-secondary text style — replace it by passing text="product-label-secondary" directly, or by dropping it entirely.
• Ember invocation is <PlumaTextLabel> with @-prefixed args (@as, @color, @text, @size, @weight).