Components

Data List

Displays metadata as a list of key-value pairs.

Status
Authorized
ID
u_2J89JSA4GJ
Name
Vlad Moroz
Company
WorkOS
<DataList.Root>
<DataList.Item align="center">
<DataList.Label minWidth="88px">Status</DataList.Label>
<DataList.Value>
<Badge color="jade" variant="soft" radius="full">
Authorized
</Badge>
</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label minWidth="88px">ID</DataList.Label>
<DataList.Value>
<Flex align="center" gap="2">
<Code variant="ghost">u_2J89JSA4GJ</Code>
<IconButton size="1" aria-label="Copy value" color="gray" variant="ghost" >
<CopyIcon />
</IconButton>
</Flex>
</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label minWidth="88px">Name</DataList.Label>
<DataList.Value>Vlad Moroz</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label minWidth="88px">Email</DataList.Label>
<DataList.Value>
<Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label minWidth="88px">Company</DataList.Label>
<DataList.Value>
<Link target="_blank" href="https://workos.com">
WorkOS
</Link>
</DataList.Value>
</DataList.Item>
</DataList.Root>

API Reference

This component is based on the dl element and supports common margin props.

Root

Contains all the parts of the data list.

PropTypeDefault
orientation
Responsive<"horizontal" | "vertical">
"horizontal"
size
Responsive<"1" | "2" | "3">
"2"
trim
Responsive<"normal" | "start" | "end" | "both">
No default value

Item

Wraps a key-value pair.

PropTypeDefault
align
Responsive<enum>
No default value

Label

Contains the key of the key-value pair.

PropTypeDefault
width
Responsive<string>
No default value
minWidth
Responsive<string>
No default value
maxWidth
Responsive<string>
No default value
color
enum
No default value
highContrast
boolean
No default value

Value

Contains the value of the key-value pair.

Examples

Orientation

Use the orientation prop to change the way the data list is layed-out.

Name
Vlad Moroz
Company
WorkOS
<DataList.Root orientation={{ initial: "vertical", sm: "horizontal" }}>
<DataList.Item>
<DataList.Label minWidth="88px">Name</DataList.Label>
<DataList.Value>Vlad Moroz</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label minWidth="88px">Email</DataList.Label>
<DataList.Value>
<Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label minWidth="88px">Company</DataList.Label>
<DataList.Value>
<Link target="_blank" href="https://workos.com">
WorkOS
</Link>
</DataList.Value>
</DataList.Item>
</DataList.Root>

Size

Use the size prop to change the size of the data list.

Name
Vlad Moroz
Company
WorkOS
Name
Vlad Moroz
Company
WorkOS
Name
Vlad Moroz
Company
WorkOS
<Flex direction="column" gap="6">
<DataList.Root size="1">
<DataList.Item>
<DataList.Label minWidth="88px">Name</DataList.Label>
<DataList.Value>Vlad Moroz</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label minWidth="88px">Email</DataList.Label>
<DataList.Value>
<Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label minWidth="88px">Company</DataList.Label>
<DataList.Value>
<Link target="_blank" href="https://workos.com">
WorkOS
</Link>
</DataList.Value>
</DataList.Item>
</DataList.Root>
<DataList.Root size="2">
<DataList.Item>
<DataList.Label minWidth="88px">Name</DataList.Label>
<DataList.Value>Vlad Moroz</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label minWidth="88px">Email</DataList.Label>
<DataList.Value>
<Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label minWidth="88px">Company</DataList.Label>
<DataList.Value>
<Link target="_blank" href="https://workos.com">
WorkOS
</Link>
</DataList.Value>
</DataList.Item>
</DataList.Root>
<DataList.Root size="3">
<DataList.Item>
<DataList.Label minWidth="88px">Name</DataList.Label>
<DataList.Value>Vlad Moroz</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label minWidth="88px">Email</DataList.Label>
<DataList.Value>
<Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label minWidth="88px">Company</DataList.Label>
<DataList.Value>
<Link target="_blank" href="https://workos.com">
WorkOS
</Link>
</DataList.Value>
</DataList.Item>
</DataList.Root>
</Flex>

Color

Use the color prop on the Label part to assign a specific color.

Name
Indigo
Name
Cyan
Name
Orange
Name
Crimson
<DataList.Root orientation="vertical">
<DataList.Item>
<DataList.Label color="indigo">Name</DataList.Label>
<DataList.Value>Indigo</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label color="cyan">Name</DataList.Label>
<DataList.Value>Cyan</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label color="orange">Name</DataList.Label>
<DataList.Value>Orange</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label color="crimson">Name</DataList.Label>
<DataList.Value>Crimson</DataList.Value>
</DataList.Item>
</DataList.Root>

High-contrast

Use the highContrast prop increase color contrast with the background.

Name
Indigo
Name
Cyan
Name
Orange
Name
Crimson
Name
Indigo
Name
Cyan
Name
Orange
Name
Crimson
<Flex gap="9">
<DataList.Root orientation="vertical">
<DataList.Item>
<DataList.Label color="indigo">Name</DataList.Label>
<DataList.Value>Indigo</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label color="cyan">Name</DataList.Label>
<DataList.Value>Cyan</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label color="orange">Name</DataList.Label>
<DataList.Value>Orange</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label color="crimson">Name</DataList.Label>
<DataList.Value>Crimson</DataList.Value>
</DataList.Item>
</DataList.Root>
<DataList.Root orientation="vertical">
<DataList.Item>
<DataList.Label color="indigo" highContrast>
Name
</DataList.Label>
<DataList.Value>Indigo</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label color="cyan" highContrast>
Name
</DataList.Label>
<DataList.Value>Cyan</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label color="orange" highContrast>
Name
</DataList.Label>
<DataList.Value>Orange</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label color="crimson" highContrast>
Name
</DataList.Label>
<DataList.Value>Crimson</DataList.Value>
</DataList.Item>
</DataList.Root>
</Flex>
PreviousContext Menu
NextDialog