ColorIndicator Edit

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

Single component

simple color indicator

Top ↑

Used in sidebar

multiple color indicator

Top ↑

Usage

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

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

Top ↑

Props

The component accepts the following props:

Top ↑

colorValue

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

  • Type: string
  • Required: Yes

Top ↑

className

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

  • Type: string
  • Required: No