OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Data List

Displays metadata as a list of key-value pairs.

Name: Jane Roe
Email: jane.roe@foo-corp.com
Organization: Foo Corp

 <DataList.Root>
  <DataList.Item>
    <DataList.Label>Name</DataList.Label>
    <DataList.Value>Jane Roe</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label>Email</DataList.Label>
    <DataList.Value>jane.roe@foo-corp.com</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label>Organization</DataList.Label>
    <DataList.Value>
      <Link href="https://foo-corp.com">Foo Corp</Link>
    </DataList.Value>
  </DataList.Item>
</DataList.Root>

API Reference

The Data List component is made up of Root, Item, Label, and Data parts. View source

Root

Lists Item parts and controls the orientation.

Prop	Type	Default
`size`	`Responsive<"1" \| "2" \| "3">`	`"2"`
`trim`	`Responsive<"normal" \| "start" \| "end" \| "both"`	`—`
`orientation`	`Responsive<"horizontal" \| "vertical">`	`"horizontal"`

This component is based on the dl element and supports common margin props m, mx, my, ml, mr, mt, mb.

Item

Groups Label and Data parts, and controls the vertical alignment between them.

Prop	Type	Default
`align`	`Responsive<"baseline" \| "start" \| "center" \| "end" \| "stretch">`	`–`

This component is based on the div element.

Label

Displays a text caption associated with the Item.

Prop	Type	Default
`width`	`string`	`–`
`minWidth`	`string`	`–`
`maxWidth`	`string`	`–`

This component is based on the dt element.

Data

Displays the value associated with the Item. This component is based on the dd element.

Examples

Alignment

By default, the Label and Data are baseline-aligned.

Use the align prop on the Item part to set a different alignment style. You can change it across breakpoints using the object syntax.

Status: Active
Name: Jane Roe
Email: jane.roe@foo-corp.com
Authentication

 <DataList.Root>
  <DataList.Item>
    <DataList.Label>Status</DataList.Label>
    <DataList.Value>
      <Badge color="green" style={{ marginLeft: -2 }}>
        Active
      </Badge>
    </DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label>Name</DataList.Label>
    <DataList.Value>Jane Roe</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label>Email</DataList.Label>
    <DataList.Value>jane.roe@foo-corp.com</DataList.Value>
  </DataList.Item>

  <DataList.Item align="center">
    <DataList.Label>Authentication</DataList.Label>
    <DataList.Value>
      <Flex gap="2" ml="-2px">
        <ProviderIcon provider="google" size="2" />
        <ProviderIcon provider="microsoft" size="2" />
      </Flex>
    </DataList.Value>
  </DataList.Item>
</DataList.Root>

Orientation

Use the orientation prop to control how Label and Data are arranged.

Name: Jane Roe
Email: jane.roe@foo-corp.com
Organization: Foo Corp

 <DataList.Root orientation="vertical">
  <DataList.Item>
    <DataList.Label>Name</DataList.Label>
    <DataList.Value>Jane Roe</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label>Email</DataList.Label>
    <DataList.Value>jane.roe@foo-corp.com</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label>Organization</DataList.Label>
    <DataList.Value>
      <Link href="https://foo-corp.com">Foo Corp</Link>
    </DataList.Value>
  </DataList.Item>
</DataList.Root>

You can change the orientation value across breakpoints using the object syntax.

Name: Jane Roe
Email: jane.roe@foo-corp.com
Organization: Foo Corp

 <DataList.Root orientation={{ initial: 'vertical', sm: 'horizontal' }}>
  <DataList.Item>
    <DataList.Label>Name</DataList.Label>
    <DataList.Value>Jane Roe</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label>Email</DataList.Label>
    <DataList.Value>jane.roe@foo-corp.com</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label>Organization</DataList.Label>
    <DataList.Value>
      <Link href="https://foo-corp.com">Foo Corp</Link>
    </DataList.Value>
  </DataList.Item>
</DataList.Root>

Size

Use the size prop to control the text size of the component.

Name: Jane Roe
Email: jane.roe@foo-corp.com
Organization: Foo Corp

Name: Jane Roe
Email: jane.roe@foo-corp.com
Organization: Foo Corp

Name: Jane Roe
Email: jane.roe@foo-corp.com
Organization: Foo Corp

 <DataList.Root size="1">
  <DataList.Item>
    <DataList.Label>Name</DataList.Label>
    <DataList.Value>Jane Roe</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label>Email</DataList.Label>
    <DataList.Value>jane.roe@foo-corp.com</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label>Organization</DataList.Label>
    <DataList.Value>
      <Link href="https://foo-corp.com">Foo Corp</Link>
    </DataList.Value>
  </DataList.Item>
</DataList.Root>

<Separator size="4" my="5" />

<DataList.Root size="2">
  <DataList.Item>
    <DataList.Label>Name</DataList.Label>
    <DataList.Value>Jane Roe</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label>Email</DataList.Label>
    <DataList.Value>jane.roe@foo-corp.com</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label>Organization</DataList.Label>
    <DataList.Value>
      <Link href="https://foo-corp.com">Foo Corp</Link>
    </DataList.Value>
  </DataList.Item>
</DataList.Root>

<Separator size="4" my="5" />

<DataList.Root size="3">
  <DataList.Item>
    <DataList.Label>Name</DataList.Label>
    <DataList.Value>Jane Roe</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label>Email</DataList.Label>
    <DataList.Value>jane.roe@foo-corp.com</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label>Organization</DataList.Label>
    <DataList.Value>
      <Link href="https://foo-corp.com">Foo Corp</Link>
    </DataList.Value>
  </DataList.Item>
</DataList.Root>

Width

Use the width, minWidth, and maxWidth props on the Label part to control the width of the labels.

Name: Jane Roe
Email: jane.roe@foo-corp.com
Organization: Foo Corp

 <DataList.Root>
  <DataList.Item>
    <DataList.Label width="120px">Name</DataList.Label>
    <DataList.Value>Jane Roe</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label width="120px">Email</DataList.Label>
    <DataList.Value>jane.roe@foo-corp.com</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label width="120px">Organization</DataList.Label>
    <DataList.Value>
      <Link href="https://foo-corp.com">Foo Corp</Link>
    </DataList.Value>
  </DataList.Item>
</DataList.Root>