# Status Label

The StatusLabel component is a visual component that allows users to quickly
determine the status of an item (e.g., "Active", "Overdue").

## Design & usage guidelines

StatusLabel is a more opinionated version of
[InlineLabel](../InlineLabel/InlineLabel.md) and offers only 5 possible status
representations:

### Success

Convey that an item is in a successful state, such as approved or paid.

### Critical

Alert the user to a critically important issue such as a late appointment or an
overdue payment.

### Warning

Warn the user of a potential forthcoming issue like an upcoming deadline or an
item awaiting response.

### Informative

Inform the user about something that may not require action, such as a quote
that has already been converted into a job.

### Inactive

Signify that an item has been archived, closed, or otherwise removed from an
active workflow.

```tsx
import React from "react";
import { Content } from "@jobber/components/Content";
import { StatusLabel } from "@jobber/components/StatusLabel";

export function StatusLabelAllStatusesExample() {
  return (
    <Content>
      <StatusLabel label="Success" status="success" alignment="start" />
      <StatusLabel label="Critical" status="critical" alignment="start" />
      <StatusLabel label="Informative" status="informative" alignment="start" />
      <StatusLabel label="Warning" status="warning" alignment="start" />
      <StatusLabel label="Inactive" status="inactive" alignment="start" />
    </Content>
  );
}
```

### Alignment

Align the color indicator with the start or end of a layout as needed.

For example, in a [List](../List/List.md) where the StatusLabel is on the
right, use the `end` alignment.

```tsx
import React from "react";
import { StatusLabel } from "@jobber/components/StatusLabel";

export function StatusLabelAlignmentExample() {
  return (
    <div style={{ display: "flex", justifyContent: "space-between" }}>
      <StatusLabel label="Start" status="inactive" alignment="start" />
      <StatusLabel label="End" status="inactive" alignment="end" />
    </div>
  );
}
```

## Related components

[InlineLabel](../InlineLabel/InlineLabel.md) is a more generic badging element that
can be used in non-"status"-y ways

* counts
* trends
* tags
* labels that need to be distinguished from other typographic content

## Content guidelines

StatusLabel does not accept any child content. It presents only a text-based
label describing the status, and a visual color indicator to reinforce the
status.

The label should be short, ideally no longer than two words.

## Accessibility

The StatusLabel has a `role` of `status` which is communicated to assistive
technology. It does not pull focus to itself but informs the user of its'
purpose.

The label portion of StatusLabel should be readable by assistive technology.

The color indicator is always used with a text label so that color is not the
only method of communicating status.

## Responsiveness

StatusLabel should "hug" it's contents, but otherwise grow as long as needed in
the available space. If StatusLabel's label is longer than the space available,
the label should wrap.


## Props

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `label` | `string` | Yes | — | Text to display |
| `alignment` | `"end" | "start"` | No | `start` | Alignment of label |
| `status` | `StatusIndicatorType` | No | `inactive` | Status color of the indicator beside text |