Source: https://www.radix-ui.com/themes/docs/components/data-list

Radix Homepage

Made by WorkOS

Radix Homepage

Made by WorkOS

ThemesThemes PrimitivesPrimitives IconsIcons ColorsColors

Documentation Playground Blog

Overview

Getting started Styling Layout Releases Resources

Theme

Overview Color Dark mode Typography Spacing Breakpoints Radius Shadows Cursors

Layout

Box Flex Grid Container Section

Typography

Text Heading Blockquote Code Em Kbd Link Quote Strong

Components

Alert Dialog Aspect Ratio Avatar Badge Button Callout Card Checkbox Checkbox Group Checkbox Cards Context Menu Data List Dialog Dropdown Menu Hover Card Icon Button Inset Popover Progress Radio Radio Group Radio Cards Scroll Area Segmented Control Select Separator Skeleton Slider Spinner Switch Table Tabs Tab Nav Text Area Text Field Tooltip

Utilities

Accessible Icon Portal Reset Slot Theme Visually Hidden

Components

Data List

Displays metadata as a list of key-value pairs.

View source Report an issue View in Playground

Status

Authorized

ID

u_2J89JSA4GJ

Name

Vlad Moroz

Email

vlad@workos.com

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.

| Prop | Type | Default | | --- | --- | --- | | orientation | Responsive<"horizontal" \| "vertical"> | "horizontal" | | size | Responsive<"1" \| "2" \| "3"> | "2" | | trim<br><br>Prop description | Responsive<"normal" \| "start" \| "end" \| "both"> | No default value |

Item

Wraps a key-value pair.

| Prop | Type | Default | | --- | --- | --- | | align | Responsive<enum><br><br>See full type | No default value |

Label

Contains the key of the key-value pair.

| Prop | Type | Default | | --- | --- | --- | | width | Responsive<string> | No default value | | minWidth | Responsive<string> | No default value | | maxWidth | Responsive<string> | No default value | | color<br><br>Prop description | enum<br><br>See full type | No default value | | highContrast<br><br>Prop description | 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

Email

vlad@workos.com

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

Email

vlad@workos.com

Company

WorkOS

Name

Vlad Moroz

Email

vlad@workos.com

Company

WorkOS

Name

Vlad Moroz

Email

vlad@workos.com

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

Edit this page on GitHub.