# Source: https://www.plain.com/docs/ui-components/badge.md

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

# Badge

> Useful for statuses or when you need to attract attention to something.

<Frame><img src="https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-badge.png?fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=abe7478ec1dc7351f4f83f5ccbb6d1e6" alt="Example badges" data-og-width="1664" width="1664" data-og-height="300" height="300" data-path="public/images/ui-component-badge.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-badge.png?w=280&fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=1c19909ef5b2edb1d09659a02797461e 280w, https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-badge.png?w=560&fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=8f8c1c9dbfa4ed10b4e9d68b54c83d13 560w, https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-badge.png?w=840&fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=89d8c6823e057e0278da06c60a7140d1 840w, https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-badge.png?w=1100&fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=489b862d414eb0e696402358872cfcb6 1100w, https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-badge.png?w=1650&fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=10734c219e4e548a03f7d11440583902 1650w, https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-badge.png?w=2500&fit=max&auto=format&n=EjhjILX5S36Y2AF-&q=85&s=2f7bcc1dc8bbd927d66d1f231e8356fd 2500w" /></Frame>

A badge has the following properties:

* `badgeLabel`: the text that should be displayed on the badge
* `badgeColor`: one of `GREY`, `GREEN`, `YELLOW`, `RED`, `BLUE`

For example:

<Tabs>
  <Tab title="Typescript SDK">
    <Snippet file="typescript-sdk/ui-badge.mdx" />
  </Tab>

  <Tab title="GraphQL">
    <Snippet file="graphql/ui-badge.mdx" />
  </Tab>
</Tabs>