Item

Item is used in combination with ItemGroup to display a list of items grouped and styled together.

Usage

Item should be used in combination with the ItemGroup component.

import {
    __experimentalItemGroup as ItemGroup,
    __experimentalItem as Item,
} from '@wordpress/components';

function Example() {
    return (
        <ItemGroup>
            <Item>Code</Item>
            <Item>is</Item>
            <Item>Poetry</Item>
        </ItemGroup>
    );
}

Props

onClick: React.MouseEventHandler<HTMLDivElement>

Even handler for processing click events. When defined, the Item component will render as a button (unless differently specified via the as prop).

• Required: No

size: ‘small’ | ‘medium’ | ‘large’

Determines the amount of padding within the component.

• Required: No
• Default: medium

Context

Item is connected to the <ItemGroup /> parent component using Context. Therefore, Item receives the size prop from the ItemGroup parent component.

In the following example, the <Item /> will render with a size of small:

import {
    __experimentalItemGroup as ItemGroup,
    __experimentalItem as Item,
} from '@wordpress/components';

const Example = () => (
    <ItemGroup size="small">
        <Item>...</Item>
    </ItemGroup>
);