> ## Documentation Index
> Fetch the complete documentation index at: https://tyk.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# UI Examples: Pill label shortcode

This page demonstrates all available styles and usage examples of the pill-label shortcode.

**Feel free to contribute by adding more classes or adjusting the colors via PR.**

Click on any example to see details about its usage and styling.

***

<h2 id="enterprise-edition">Default style - Enterprise edition</h2>

### Enterprise security features <Badge variant="info">EE</Badge>

<Expandable title={'Click to view usage and styling'}>
  Type: Default Style

  Usage: Used for Enterprise Edition features

  Class name: `pill-outline-brandpurple-light` (default)

  This creates a pill with:

  * Transparent background
  * Dark purple (#8438fa) border
  * Dark purple (#8438fa) text

  Example appearance: `[  EE  ]` (outline style with purple text)

  Code example:

  ```
  ### Enterprise security features {{</* pill-label text="EE" */>}}
  ```
</Expandable>

***

<h2 id="cloud-features">Dark purple style - Cloud features</h2>

### Governance <Badge variant="info">CLOUD</Badge>

<Expandable title={'Click to view usage and styling'}>
  Type: Dark Purple Style

  Usage: Used for Cloud Features

  Class name: `pill-brandpurple-dark`

  This creates a pill with:

  * Dark purple (#8438fa) background
  * White text

  Example appearance: `[CLOUD]` (solid purple background with white text)

  Code example:

  ```
  ### Cloud-only feature {{</* pill-label text="CLOUD" class="pill-brandpurple-dark" */>}}
  ```
</Expandable>

***

<h2 id="lab-releases">Yellow style - Lab releases</h2>

### AI future feature <Badge variant="warning">LAB RELEASE</Badge>

<Expandable title={'Click to view usage and styling'}>
  Type: Yellow Style

  Usage: Used for Lab Releases

  Class name: `pill-yellow`

  This creates a pill with:

  * Yellow (#d6b218) background
  * Black text

  Example appearance: `[LAB RELEASE]` (solid yellow background with black text)

  Code example:

  ```
  ### Lab feature {{</* pill-label text="LAB RELEASE" class="pill-yellow" */>}}
  ```
</Expandable>

***

<h2 id="deprecated-features">Red style - Deprecated features</h2>

### Tyk classic API definition <Badge variant="danger">DEPRECATED</Badge>

<Expandable title={'Click to view usage and styling'}>
  Type: Red Style

  Usage: Used for Deprecated Features

  Class name: `pill-red`

  This creates a pill with:

  * Red (#ff6c7d) background
  * White text

  Example appearance: `[DEPRECATED]` (solid red background with white text)

  Code example:

  ```
  ### Tyk classic API definition {{</* pill-label text="DEPRECATED" class="pill-red" */>}}
  ```
</Expandable>

***

<h2 id="tutorials">Light purple style - Tutorials</h2>

### Tyk streams getting started <Badge variant="info">TUTORIAL</Badge>

<Expandable title={'Click to view usage and styling'}>
  Type: Light Purple Style

  Usage: Used for Tutorials

  Class name: `pill-default`

  This creates a pill with:

  * Light purple (#ededf9) background
  * Medium purple (#505071) text

  Example appearance: `[TUTORIAL]` (light purple background with dark purple text)

  Code example:

  ```
  ### Tyk streams getting started {{</* pill-label text="TUTORIAL" class="pill-default" */>}}
  ```
</Expandable>

***

<h2 id="new-features">Green style - New features</h2>

### New feature <Badge variant="info">NEW</Badge>

<Expandable title={'Click to view usage and styling'}>
  Type: Green Style

  Usage: Used for New Features

  Class name: `pill-brandgreen`

  This creates a pill with:

  * Green (#00cdb0) background
  * Black text

  Example appearance: `[NEW]` (solid green background with black text)

  Code example:

  ```
  ### New feature {{</* pill-label text="NEW" class="pill-brandgreen" */>}}
  ```
</Expandable>

***

<h2 id="custom-styling">Custom styling</h2>

### Custom label <Badge variant="info">CUSTOM</Badge>

<Expandable title={'Click to view usage and styling'}>
  Type: Custom Styling

  Usage: Used for special cases requiring custom styling

  Uses inline `style` attribute instead of class

  This creates a pill with custom inline styling - in this case:

  * Light gray background
  * Dark gray text
  * Light gray border

  Example appearance: `[CUSTOM]` (custom styling as specified)

  Code example:

  ```
  ### Custom label {{</* pill-label text="CUSTOM" style="background-color: #f0f0f0; color: #333; border: 1px solid #ccc;" */>}}
  ```
</Expandable>

***

<h2 id="reference-table">Reference table</h2>

| Class Name                               | Best For            | Background   | Text Color    | Border      |
| :--------------------------------------- | :------------------ | :----------- | :------------ | :---------- |
| pill-outline-brandpurple-light (default) | Enterprise Edition  | Transparent  | Dark Purple   | Dark Purple |
| pill-brandpurple-dark                    | Cloud Features      | Dark Purple  | White         | None        |
| pill-yellow                              | Lab Releases        | Yellow       | Black         | None        |
| pill-red                                 | Deprecated Features | Red          | White         | None        |
| pill-brandgreen                          | New Features        | Green        | Black         | None        |
| pill-default                             | Tutorials           | Light Purple | Medium Purple | None        |