# Item

Flexible container for list items with media, content, and actions

## Item[​](#item-1 "Direct link to Item")

Flexible container for list items with media, content, and actions

**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)

### Props[​](#props "Direct link to Props")

| Prop      | Type                                        | Required | Default   | Description |
| --------- | ------------------------------------------- | -------- | --------- | ----------- |
| `variant` | `"default" \| "outline" \| "muted" \| null` |          | `default` | -           |
| `size`    | `"default" \| "sm" \| null`                 |          | `default` | -           |
| `asChild` | `boolean`                                   |          | `false`   | -           |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { Item } from '@databricks/appkit-ui';

<Item /* props */ />

```

## ItemActions[​](#itemactions "Direct link to ItemActions")

**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)

### Props[​](#props-1 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-1 "Direct link to Usage")

```tsx
import { ItemActions } from '@databricks/appkit-ui';

<ItemActions /* props */ />

```

## ItemContent[​](#itemcontent "Direct link to ItemContent")

**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)

### Props[​](#props-2 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-2 "Direct link to Usage")

```tsx
import { ItemContent } from '@databricks/appkit-ui';

<ItemContent /* props */ />

```

## ItemDescription[​](#itemdescription "Direct link to ItemDescription")

**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)

### Props[​](#props-3 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-3 "Direct link to Usage")

```tsx
import { ItemDescription } from '@databricks/appkit-ui';

<ItemDescription /* props */ />

```

## ItemFooter[​](#itemfooter "Direct link to ItemFooter")

**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)

### Props[​](#props-4 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-4 "Direct link to Usage")

```tsx
import { ItemFooter } from '@databricks/appkit-ui';

<ItemFooter /* props */ />

```

## ItemGroup[​](#itemgroup "Direct link to ItemGroup")

**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)

### Props[​](#props-5 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-5 "Direct link to Usage")

```tsx
import { ItemGroup } from '@databricks/appkit-ui';

<ItemGroup /* props */ />

```

## ItemHeader[​](#itemheader "Direct link to ItemHeader")

**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)

### Props[​](#props-6 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-6 "Direct link to Usage")

```tsx
import { ItemHeader } from '@databricks/appkit-ui';

<ItemHeader /* props */ />

```

## ItemMedia[​](#itemmedia "Direct link to ItemMedia")

**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)

### Props[​](#props-7 "Direct link to Props")

| Prop      | Type                                     | Required | Default   | Description |
| --------- | ---------------------------------------- | -------- | --------- | ----------- |
| `variant` | `"image" \| "default" \| "icon" \| null` |          | `default` | -           |

### Usage[​](#usage-7 "Direct link to Usage")

```tsx
import { ItemMedia } from '@databricks/appkit-ui';

<ItemMedia /* props */ />

```

## ItemSeparator[​](#itemseparator "Direct link to ItemSeparator")

**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)

### Props[​](#props-8 "Direct link to Props")

| Prop          | Type      | Required | Default    | Description                                                                                                                                                                          |
| ------------- | --------- | -------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `orientation` | `enum`    |          | `vertical` | Either `vertical` or `horizontal`. Defaults to `horizontal`.                                                                                                                         |
| `decorative`  | `boolean` |          | -          | Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree. |
| `asChild`     | `boolean` |          | -          | -                                                                                                                                                                                    |

### Usage[​](#usage-8 "Direct link to Usage")

```tsx
import { ItemSeparator } from '@databricks/appkit-ui';

<ItemSeparator /* props */ />

```

## ItemTitle[​](#itemtitle "Direct link to ItemTitle")

**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)

### Props[​](#props-9 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-9 "Direct link to Usage")

```tsx
import { ItemTitle } from '@databricks/appkit-ui';

<ItemTitle /* props */ />

```