Page History
(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Label
Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11613-45085&t=ftfrOGkPzlG2GaTo-1
Overview
- The Label component displays text, numbers, or dates.
- It supports formatting options such as font size, weight, and padding.
- Icons, tooltips, and ellipsis handling can be added for improved clarity.
- Conditional rules allow the label to show different text based on data thresholds.
- This makes it useful for presenting status information or contextual messages.
...
- id – Specifies a unique identifier for the component used for programmatic access. For example, "orderStatusLabel" enables targeted manipulation of this specific label component.
- dataTestId – Sets the testing hook ID for automated testing. For example, setting to "order-status-label" allows test scripts to reliably locate this component.
- enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, the label can be highlighted during onboarding or tutorial flows to explain its meaning to users.
- guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Order Status", "de-DE": "Bestellstatus"} provides clear identification during guided tours.
- guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "This label shows the current status of the order", "de-DE": "Dieses Label zeigt den aktuellen Status der Bestellung"} provides detailed context during guided tours.
Guidelines
- Do not use colons after label names.
- Labels are not helper text; they should be succinct.
- Use only one to two words for labels.
Accessibility
...
Usage
- Use for short standalone text, numbers, or dates.
- Add icons to reinforce meaning, but keep clear text for the primary message.
Sizing & Layout
- Adjust text size and weight to control prominence.
- Let the control size to its content or stretch to fill, depending on context.
- Apply internal padding to maintain legibility and alignment.
- When space is tight, keep it single-line and truncate with an ellipsis.
Tooltips
- Use a tooltip for definitions, abbreviations, or to reveal truncated content.
- Position it so it doesn’t obscure the label.
- Add a brief delay to reduce accidental activations.
- Keep tooltips supplemental; critical information must remain visible.
Data-Driven / Conditional Behavior
- Define mutually exclusive conditions and provide a sensible default.
- Choose the correct content type (text, number, date-time) for predictable rendering.
- Specify a date/time pattern when showing dates for consistent output.
Visibility & Authorization
- Show the label only when the current UI state calls for it.
- Restrict visibility for specific audiences or roles when necessary.
Content & Localization
- Keep copy concise and localize it for supported languages.
- Use template expressions for dynamic content when the text depends on context.
- In guided tours, provide a short title and a one-line description that explains the label’s purpose.
- Give the label a clear internal name and a stable test hook for automation.
Dos & Don’ts
| Do | Don’t |
|---|---|
| Choose the correct content type and format dates deterministically. | Leave dates or numbers as raw text with inconsistent rendering. |
| Keep labels short; truncate if space is limited. | Write long sentences that wrap unpredictably. |
| Use icons to reinforce meaning while keeping clear text. | Replace the label entirely with an icon. |
| Define targeted rules with a default fallback. | Manually toggle text outside the component’s rule system. |
| Add a tooltip for definitions or truncated text. | Put critical information only in a tooltip. |
| Adjust emphasis with text size/weight. | Depend on ALL CAPS or ad-hoc styling hacks. |
| Restrict visibility for sensitive content. | Show restricted information and rely on wording alone. |
| Show the label only when relevant to the current state. | Keep it visible regardless of context. |
| Use lifecycle hooks for setup and cleanup. | Initialize late and forget to release resources. |
| Use stable test hooks for automation. | Target the label by visible text that may change. |
Accessibility
- Provide concise, localized visible text so assistive tech announces meaningful content without relying on a tooltip.
- Avoid color-only meaning by pairing clear wording with optional icons when helpful.
- Reveal truncated content via a tooltip on hover or an appropriate trigger.
- Normalize date/time and numeric output so screen readers announce predictable patterns.
- Expose stable identifiers for automated accessibility checks and programmatic control.
- Place tooltips where they don’t obscure the label; use a short delay to prevent accidental triggers.
- Hide irrelevant or restricted labels to reduce noise for assistive technologies.
