ToggleGroupControlOptionIcon

ToggleGroupControlOptionIcon is a form component which is meant to be used as a child of ToggleGroupControl and displays an icon.

Usage

import {
    __experimentalToggleGroupControl as ToggleGroupControl,
    __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
} from '@wordpress/components';
import { formatLowercase, formatUppercase } from '@wordpress/icons';

function Example() {
    return (
        <ToggleGroupControl>
            <ToggleGroupControlOptionIcon
                value="uppercase"
                icon={ formatUppercase }
                label="Uppercase"
            />
            <ToggleGroupControlOptionIcon
                value="lowercase"
                icon={ formatLowercase }
                label="Lowercase"
            />
        </ToggleGroupControl>
    );
}

Props

value: string | number

The value of the ToggleGroupControlOption.

• Required: Yes

icon: Component

Icon displayed as the content of the option. Usually one of the icons from the @wordpress/icons package, or a custom React <svg> icon.

• Required: Yes

label: string

The text to accessibly label the icon option. Will also be shown in a tooltip.

• Required: Yes