import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/addon-docs/blocks';
import { cdnJs } from '../../globals/internal/storybook-cdn';
import * as IconIndicatorStories from './icon-indicator.stories';

<Meta of={IconIndicatorStories} />

# Icon indicator

## Table of Contents

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

## Overview

The `icon-indicator` 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.

<Canvas of={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 of="cds-icon-indicator" />

<Markdown>{`${cdnJs({ components: ['icon-indicator'] })}`}</Markdown>

## 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/web-components/src/components/icon-indicator/icon-indicator.mdx).
