---
name: ColorIndicator
package: '@wordpress/components'
category: Forms
status: stable
canonical: 'https://system.automattic.design/components/colorindicator/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/components-colorindicator--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/color-indicator'
---

# ColorIndicator

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.

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

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `colorValue` *(required)* | `Background<string \| number> \| undefined` | — | The color of the indicator. Any value from the CSS `background` property is supported. |


## Examples

### Default

```tsx
const Default = () => <ColorIndicator colorValue="#0073aa" />;
```