# Inline Label

InlineLabel is a generic badging element that can be used to distinguish a
labeling element from other typographic content.

## Design & usage guidelines

Inline labels can be used fairly broadly, but the application of
[color](../Colors/Colors.md) should be handled with intent. Use of color along with a
descriptive label can help the user understand the meaning of an item.

### Counts

```tsx
import React from "react";
import { Box } from "@jobber/components/Box";
import { Text } from "@jobber/components/Text";
import { InlineLabel } from "@jobber/components/InlineLabel";

export function InlineLabelCountsExample() {
  return (
    <Box direction="row" alignItems="baseline" gap="small">
      <Text>Unread</Text>
      <InlineLabel color="red">+99</InlineLabel>
    </Box>
  );
}
```

### Trends

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

export function InlineLabelTrendsExample() {
  return (
    <>
      <InlineLabel color="red">↓ 15</InlineLabel>
      <InlineLabel color="green">↑ 25</InlineLabel>
    </>
  );
}
```

### Tags

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

export function InlineLabelTagsExample() {
  return (
    <Box direction="row" alignItems="center" gap="smaller">
      <InlineLabel>Preferred customer</InlineLabel>
      <InlineLabel>Northeast</InlineLabel>
      <InlineLabel>Residential</InlineLabel>
      <InlineLabel>Electrical</InlineLabel>
      <InlineLabel>10OFF promo</InlineLabel>
    </Box>
  );
}
```

### Labels that need to be distinguished from other typographic element

```tsx
import React from "react";
import { Box } from "@jobber/components/Box";
import { Heading } from "@jobber/components/Heading";
import { InlineLabel } from "@jobber/components/InlineLabel";

export function InlineLabelTypographyExample() {
  return (
    <Box direction="row" alignItems="center" gap="small">
      <Heading level={2}>New feature</Heading>
      <InlineLabel size="large">Beta</InlineLabel>
    </Box>
  );
}
```

## Related components

[StatusLabel](../StatusLabel/StatusLabel.md) should be used when you're conveying the
"status" of something.

## Variants

### Sizes

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

export function InlineLabelSizesExample() {
  return (
    <>
      <InlineLabel size="base" color="blue">
        Base
      </InlineLabel>
      <InlineLabel size="small" color="blue">
        Small
      </InlineLabel>
      <InlineLabel size="large" color="blue">
        Beta
      </InlineLabel>
      <InlineLabel size="larger" color="green">
        99+
      </InlineLabel>
    </>
  );
}
```

### Colors

| Inline Label | Color         |
| :----------- | :------------ |
| GreyBlue     | `greyBlue`    |
| Red          | `red`         |
| Orange       | `orange`      |
| Green        | `green`       |
| Blue         | `blue`        |
| Yellow       | `yellow`      |
| Lime         | `lime`        |
| Purple       | `purple`      |
| Pink         | `pink`        |
| Teal         | `teal`        |
| YellowGreen  | `yellowGreen` |
| BlueDark     | `blueDark`    |
| LightBlue    | `lightBlue`   |
| Indigo       | `indigo`      |


## Props

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `color` | `InlineLabelColors` | No | `greyBlue` | The color of the label |
| `size` | `"base" | "large" | "larger" | "small"` | No | `base` | The size of the label |