LabeledData

Overview

• What is this component for? The Labeled Data component is utilized on entity detail pages to visualize read-only object properties, parameters, and metadata attributes. It cleanly maps a specific data category to its respective value or values.
• Purpose: It solves the need for structured visual parsing, enabling users to scan, find, and review system configuration details or core business parameters effortlessly.

Anatomy

• Container: The structural outer wrapper that defines the boundary alignment and layout spacing for the content column.
• Label: Uppercase, muted text acting as the header indicator for the property being reviewed (e.g., COUNTRY, CARD BRAND, DOMAIN).
• Value Element(s): The continuous data output fields positioned directly below the label. This element is highly flexible and accepts plain text strings/URLs, mixed text paired with supportive visual media (country flags/icons), or rich component inline chips (e.g., VISA or MC) with trailing interactive elements like a "Copy" clipboard icon.

Best practices

• Do: Stack multi-value records vertically beneath a single label column when space is constrained to retain crisp vertical grid lines and optimize table scanability.
• Don't: Mix unstructured action elements inline without defining clear boundaries or layout separation, as it breaks visual expectations.