Item Edit

This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

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

Usage 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>
    );
}

Top ↑

Props Props

isAction: boolean isAction: boolean

Renders the item as an interactive button element.

  • Required: No
  • Default: false

Top ↑

size: 'small' | 'medium' | 'large' size: 'small' | 'medium' | 'large'

Determines the amount of padding within the component.

  • Required: No
  • Default: medium

Top ↑

Context 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>
);