> ## Documentation Index
> Fetch the complete documentation index at: https://plain-mattvagni-patch-1.mintlify.site/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>![Example badges](https://mintlify.s3-us-west-1.amazonaws.com/plain-mattvagni-patch-1/public/images/ui-component-badge.png)</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>