Skip to main content
The DescriptionList API is experimental and may change in the future. It has been marked as @deprecated to remind the developer that it is experimental. It is not "deprecated", just experimental. Please don't use it in production versions of your app. We do not guarantee backward compatibility, or that the API will remain stable.
import {Experimental_DescriptionList} from "attio/client"
It can be thought of as analogous to the <dl>, <dt>, and <dd> HTML tags.

​
Example

TypeScript
import {Experimental_DescriptionList, Experimental_Badge} from "attio/client"

export function InformationDialog() {
  return (
    <Experimental_DescriptionList label="Cryptids of Cornwall">
      <Experimental_DescriptionList.Item label="Beast of Bodmin" icon="Eye">
        A large feline inhabiting Bodmin Moor.
      </Experimental_DescriptionList.Item>
      <Experimental_DescriptionList.Item label="Morgawr" icon="GlobeHemisphereEast">
        A sea serpent.
      </Experimental_DescriptionList.Item>
      <Experimental_DescriptionList.Item label="Owlman" icon="Moon">
        A giant owl-like creature.
      </Experimental_DescriptionList.Item>
      <Experimental_DescriptionList.Item label="Categories" icon="Tag">
        <Experimental_Badge color="blue">Folklore</Experimental_Badge>
        <Experimental_Badge color="amber">Cornwall</Experimental_Badge>
        <Experimental_Badge color="lavender">Paranormal</Experimental_Badge>
      </Experimental_DescriptionList.Item>
    </Experimental_DescriptionList>
  )
}

​
Props

​
label
string
An optional label to display above the description list describing what is listed.
​
children
React.ReactNode
required
The <Experimental_DescriptionList.Item />s with the information to display.
An <Experimental_DescriptionList /> component can only have <Experimental_DescriptionList.Item />s as children.

​
<Experimental_DescriptionList.Item />

An item with information.

​
Props

​
label
string
required
The label of the information.
​
icon
Icon
An optional Attio Icon.
​
children
React.ReactNode
required
The information corresponding to the label.
An <Experimental_DescriptionList.Item /> can contain either text (including <Link />s), or <Experimental_Badge />s, but never both.
⌘I