import { ArgTypes, Meta, Canvas } from '@storybook/addon-docs/blocks';
import * as IconIndicatorStories from './IconIndicator.stories';
import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';

<Meta isTemplate />

# IconIndicator

[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/IconIndicator)
&nbsp;

{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}

## Table of Contents

- [Overview](#overview)
- [Kind](#kind)
- [Size](#size)
- [Customizing the label](#customizing-the-label)
- [Component API](#component-api)
- [Feedback](#feedback)

{/* <!-- END doctoc generated TOC please keep comment here to allow auto update --> */}

## Overview

The `IconIndicator` component is useful for communicating severity level
information to users. The shapes and colors, communicate severity that enables
users to quickly assess and identify status and respond accordingly.

```jsx
import { preview__IconIndicator as IconIndicator } from '@carbon/react';

function ExampleComponent() {
  return (
    <IconIndicator kind="failed" label="Failed">
  );
}
```

<Canvas
  of={IconIndicatorStories.Default}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(IconIndicatorStories.Default),
    },
  ]}
/>

## Kind

Icon indicators can take the form of failed, caution major, caution minor,
undefined, succeeded, normal, in-progress incomplete, not started, pending,
unknown, and informative.

## Size

Icon indicators have two size options 16 and 20. The default is 16.

## Customizing the label

You can set a string to customize the label of the Icon indicator.

## Component API

<ArgTypes />

## Feedback

Help us improve this component by providing feedback, asking questions on Slack,
or updating this file on
[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/IconIndicator/IconIndicator.mdx).
