> ## Documentation Index
> Fetch the complete documentation index at: https://docs.attio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <DialogList />

> A navigatable and clickable list of items in a dialog.

<img className="dark:hidden" width="720" height="440" noZoom src="https://mintcdn.com/attio/4Fh2EPa8-SlLTNAV/images/dialog-list.png?fit=max&auto=format&n=4Fh2EPa8-SlLTNAV&q=85&s=a37bdf43ccb4038cbb7cdf0b5157f7c2" data-path="images/dialog-list.png" />

<img className="hidden dark:block" width="720" height="440" noZoom src="https://mintcdn.com/attio/4Fh2EPa8-SlLTNAV/images/dialog-list-dark.png?fit=max&auto=format&n=4Fh2EPa8-SlLTNAV&q=85&s=48cc5be636a78d431f719af77c15f92e" data-path="images/dialog-list-dark.png" />

## Example

```tsx theme={"system"}
import {DialogList, showDialog, StatusBadge} from "attio/client"

const items: Array<{id: string; name: string; url: string; status: string}> = []

showDialog({
  title: "My Items",
  Dialog: () => {
    return (
      <DialogList emptyState={{text: "No items found"}}>
        {items.map((item) => (
          <DialogList.Item
            key={item.id}
            icon="Note"
            onTrigger={() => {
              window.open(item.url)
            }}
            actionLabel="View item"
            suffix={<StatusBadge color="#00D17E">{item.status}</StatusBadge>}
          >
            {item.name}
          </DialogList.Item>
        ))}
      </DialogList>
    )
  },
})
```

## `DialogList` Props

<ParamField path="emptyState" type="{text:string, actions: Array<{label:string, onTrigger:() => void, icon?: Icon}>}" required>
  The text to display when the list is empty, and an optional array of actions to display when the
  user clicks the empty state.
</ParamField>

<ParamField path="children" type="React.ReactNode" required>
  The children should be a list of `DialogList.Item` components.
</ParamField>

## `DialogList.Item` Props

<ParamField path="children" type="React.ReactNode" required>
  The text to display for the item.
</ParamField>

<ParamField path="icon" type="Icon" required>
  The icon to display for the item.
</ParamField>

<ParamField path="onTrigger" type="() => void">
  A function that will be called if the user clicks the item.
</ParamField>

<ParamField path="actionLabel" type="string">
  The text to display for the action button for the item in the dialog footer. Required if
  `onTrigger` is provided.
</ParamField>

<ParamField path="suffix" type="React.ReactNode">
  The suffix to display for the item. Can be a [Typography](/sdk/components/typography) component or
  a [StatusBadge](/sdk/components/status-badge) component.
</ParamField>