Made by ScaleRadix Homepage
Scale UI Radix
DocumentationDocumentationComponents CatalogComponents CatalogPlayroomPlayroom
Radix PrimitivesFont Awesome Icons
Components

Data List

Displays metadata as a list of key-value pairs.

View sourceReport an issueView in Catalog
Status
Authorized
ID
u_2J89JSA4GJ
Name
Vlad Moroz
Email
[email protected]
Company
WorkOS
<DataList.Root>

  <DataList.Item align="center">

    <DataList.Label minWidth="88px">Status</DataList.Label>

    <DataList.Value>

      <Badge color="success" 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="neutral" 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:[email protected]">[email protected]</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
Email
[email protected]
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:[email protected]">[email protected]</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. Currently, we recommend using only sizes 2 and 3 following the ScaleUI Radix design system.

Name
Vlad Moroz
Email
[email protected]
Company
WorkOS
Name
Vlad Moroz
Email
[email protected]
Company
WorkOS
<Flex direction="column" gap="6">

  <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:[email protected]">[email protected]</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:[email protected]">[email protected]</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>
PreviousContext Menu
NextDialog
Edit this page on GitHub.