ColorIndicator is a React component that renders a specific color in a circle. It’s often used to summarize a collection of used colors in a child component.

Single component

simple color indicator

Used in sidebar

multiple color indicator


import { ColorIndicator } from '@wordpress/components';

const MyColorIndicator = () => <ColorIndicator colorValue="#0073aa" />;


The component accepts the following props:

className: string

Extra classes for the used <span> element. By default only component-color-indicator is added.

  • Required: No

colorValue: CSSProperties[ ‘background’ ]

The color of the indicator. Any value from the CSS background property is supported.

  • Required: Yes