In our UIs we have a local component which is responsible for displaying data with label.

Here are some variants:

And use cases:

API

<SuiInfoCell as="date"  format="DD.MM.YYYY"  :label="$t('common.label.leavingDate')" :value="masterData?.leavingDate" />
<SuiInfoCell as="boolean" :label="$t('common.label.leaving')" :value="masterData?.leaving" />
<SuiInfoCell :label="$t('common.label.jobText')" text-wrap :value="masterData?.jobText" />

Attributes are type safe, for example if component has as="date" it is not possible to pass string as a value. It can be only Date, undefined or null. IntelliSense also can suggest related format attribute.

We supporting: boolean, date, link, email, icon, text, number

Name proposals

• OnyxDataLabel
• OnyxInfoCell (maybe doesn't fit because of reference to DataGrid)
• OnyxDetailItem
• OnyxLabelValue