DataField

A read-only field for displaying a label-value pair. Supports vertical and horizontal layouts.

Vertical

A profile card with DataField grid layout inside a Card.

Horizontal DataFields with rich values like Badge and Link components.

DataFields with ProgressBar values for system monitoring.

DataFields with custom ReactNode values including icons and multi-line content.

Prop	Type	Default	Description
`label`	`string`	—	The field label text.
`value`	`ReactNode`	—	The field value to display.
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Layout direction of the label and value.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

label

string

The field label text.

value

ReactNode

The field value to display.

orientation"vertical"

"vertical" | "horizontal"

Layout direction of the label and value.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}