Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Item

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

## Item​

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

Source: `packages/appkit-ui/src/react/ui/item.tsx`

### Props​

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

### Usage​

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

    <Item /* props */ />

## ItemActions​

Source: `packages/appkit-ui/src/react/ui/item.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <ItemActions /* props */ />

## ItemContent​

Source: `packages/appkit-ui/src/react/ui/item.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <ItemContent /* props */ />

## ItemDescription​

Source: `packages/appkit-ui/src/react/ui/item.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <ItemDescription /* props */ />

## ItemFooter​

Source: `packages/appkit-ui/src/react/ui/item.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <ItemFooter /* props */ />

## ItemGroup​

Source: `packages/appkit-ui/src/react/ui/item.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <ItemGroup /* props */ />

## ItemHeader​

Source: `packages/appkit-ui/src/react/ui/item.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <ItemHeader /* props */ />

## ItemMedia​

Source: `packages/appkit-ui/src/react/ui/item.tsx`

### Props​

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

### Usage​

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

    <ItemMedia /* props */ />

## ItemSeparator​

Source: `packages/appkit-ui/src/react/ui/item.tsx`

### 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​

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

    <ItemSeparator /* props */ />

## ItemTitle​

Source: `packages/appkit-ui/src/react/ui/item.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <ItemTitle /* props */ />