This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
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 __nextHasNoMarginBottom __next40pxDefaultSize>
<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