@workday/canvas-kit-docs/dist/mdx/preview-react/status-indicator/StatusIndicator.mdx

Documentation components of Canvas Kit components

import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';

import Basic from './examples/Basic';
import Emphasis from './examples/Emphasis';
import Icon from './examples/Icon';
import Overflow from './examples/Overflow';
import Variants from './examples/Variants';


# Canvas Kit Status Indicator

Status Indicators help the user quickly identify the status of a task, action, or page element.

## Installation

```sh
yarn add @workday/canvas-kit-preview-react
```

## Usage

### Basic Example

`StatusIndicator` includes a container `StatusIndicator` component and the following subcomponents
which can be composed in a variety of ways: `StatusIndicator.Label` and `StatusIndicator.Icon`.

A basic `StatusIndicator` with a `StatusIndicator.Label` will render text with a gray background and
low emphasis.

<ExampleCodeBlock code={Basic} />

### Emphasis

Set the `emphasis` prop of `StatusIndicator` to adjust the contrast between the text and background
color. Emphasis is typically used to convey more visual urgency.

`emphasis` accepts `high` or `low`.

<ExampleCodeBlock code={Emphasis} />

### Icon

Use `StatusIndicator.Icon` to add an icon to the `StatusIndicator` as a visual decorator. The
position of the icon may be adjusted depending on where you place it in the markup.

<ExampleCodeBlock code={Icon} />

### Overflow

We **strongly** discourage using text in a `StatusIndicator` which will cause it to exceed its
maximum width of `200px`. In situations where this cannot be avoided and text must be overflowed, we
suggest wrapping `StatusIndicator` in an `OverflowTooltip` and applying `tabIndex={0}` to it so the
overflowed text is accessible via keyboard and mouse. You may also override the default `maxWidth`
of `StatusIndicator` via [style props](/get-started/for-developers/documentation/style-props/).

<ExampleCodeBlock code={Overflow} />

### Variants

Set the `variant` prop of `StatusIndicator` to adjust its background color. `variant` accepts the
following values:

- `gray`
- `orange`
- `blue`
- `green`
- `red`
- `transparent`

The background color dictated by the `variant` will be dark or light based on the `emphasis`.

<ExampleCodeBlock code={Variants} />

### Custom Styles

Status Indicator and its subcomponents support custom styling via the `cs` prop. For more
information, check our
["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).

## Component API

<SymbolDoc name="StatusIndicator" fileName="/preview-react/" />