# Badge

> Display small labels for status, versions, and metadata inline with your content.

Use the `<Badge>` component to display small pieces of information, such as status indicators, categories, versions, or release dates. To display longer notes, use [callouts](/docs/writing-content/components/callouts).

## Usage

<div>
  <div>
    ### Plant Care API <Badge intent="info">v2.1.0</Badge> <Badge intent="launch" minimal>New</Badge>
  </div>
</div>

```jsx Markdown
### Plant Care API <Badge intent="info">v2.1.0</Badge> <Badge intent="launch" minimal>New</Badge>
```

## Variants

### Intents

<div>
  <div>
    <div>
      <Badge intent="success">
        Success
      </Badge>

      <Badge intent="note">
        Note
      </Badge>

      <Badge intent="tip">
        Tip
      </Badge>

      <Badge intent="warning">
        Warning
      </Badge>

      <Badge intent="error">
        Error
      </Badge>

      <Badge intent="info">
        Info
      </Badge>

      <Badge intent="launch">
        Launch
      </Badge>

      <Badge intent="check">
        Check
      </Badge>
    </div>
  </div>
</div>

```jsx Markdown
<Badge intent="success">Success</Badge>
<Badge intent="note">Note</Badge>
<Badge intent="tip">Tip</Badge>
<Badge intent="warning">Warning</Badge>
<Badge intent="error">Error</Badge>
<Badge intent="info">Info</Badge>
<Badge intent="launch">Launch</Badge>
<Badge intent="check">Check</Badge>
```

### Styles

<div>
  <div>
    <div>
      <Badge intent="success" minimal>
        Success badge, minimal style
      </Badge>

      <Badge intent="error" minimal>
        Error badge, minimal style
      </Badge>

      <Badge intent="success" outlined>
        Success badge, outlined style
      </Badge>

      <Badge intent="error" minimal outlined>
        Error badge, outlined and minimal style
      </Badge>
    </div>
  </div>
</div>

```jsx Markdown
<Badge intent="success" minimal>Success badge, minimal style</Badge>
<Badge intent="error" minimal>Error badge, minimal style</Badge>
<Badge intent="success" outlined>Success badge, outlined style</Badge>
<Badge intent="error" minimal outlined>Error badge, outlined and minimal style</Badge>
```

## Properties

<ParamField path="intent" type="string" required={true}>
  The semantic color of the badge. Available options: `success`, `note`, `tip`, `warning`, `error`, `info`, `launch`, `check`
</ParamField>

<ParamField path="minimal" type="boolean" required={false} default="false">
  Displays the badge with a more subtle background style. Can be combined with `outlined`.
</ParamField>

<ParamField path="outlined" type="boolean" required={false} default="false">
  Displays the badge with an outlined border style. Can be combined with `minimal`.
</ParamField>