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

Documentation components of Canvas Kit components

import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';

import Basic from './examples/Basic';
import Icon from './examples/Icon';
import Emphasis from './examples/Emphasis';
import MaxWidth from './examples/MaxWidth';

# Canvas Kit Status Indicator

<StatusIndicator variant="red">
  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
</StatusIndicator>

`StatusIndicator` in Main has been deprecated and will be removed in a future major version. Please
use
[`StatusIndicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic)
in Preview instead.

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

[> Workday Design Reference](https://design.workday.com/components/indicators/status-indicators)

## Installation

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

## Usage

### Basic Example

<ExampleCodeBlock code={Basic} />

Note that the `type` prop is required (there is no default value). `type` accepts the following
values:

| Type                               | Suggested Purpose                                                                              |
| ---------------------------------- | ---------------------------------------------------------------------------------------------- |
| `StatusIndicator.Type.Gray`        | Basic, general status. No action required.                                                     |
| `StatusIndicator.Type.Orange`      | Signifies alerts, that a user must take action, or that something requires attention.          |
| `StatusIndicator.Type.Blue`        | Signifies an item in progress, an update, or a current status.                                 |
| `StatusIndicator.Type.Green`       | Signifies success, completion, or celebration.                                                 |
| `StatusIndicator.Type.Red`         | Signifies an error or issue, or removal or destruction.                                        |
| `StatusIndicator.Type.Transparent` | General status and related information intended for use on top of imagery, video, or graphics. |

### Emphasis

Set the `emphasis` prop of the Status Indicator to convey varying levels of emphasis. `emphasis`
accepts the following values:

- `StatusIndicator.Emphasis.High` (Default)
- `StatusIndicator.Emphasis.Low`

<ExampleCodeBlock code={Emphasis} />

Note that the `High` and `Low` emphasis levels are identical for `Transparent` Status Indicators.

### Icon

Set the `icon` prop of the Status Indicator to a Canvas System Icon to display that icon beside the
label.

<ExampleCodeBlock code={Icon} />

### Max Width

By default, the maximum width of a Status Indicator is `200px`. When the text in the StatusIndicator
exceeds the max width, it will be truncated with an ellipsis. This maxWidth can be customized.

Avoid truncation wherever possible by using shorter text in Status Indicators. In the case where
truncation is necessary, you should use an `OverflowTooltip`. For the full text to be accessible
when you do this, you should make the tooltip focusable with `tabIndex`.

<ExampleCodeBlock code={MaxWidth} />

## Component API

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