> ## Documentation Index
> Fetch the complete documentation index at: https://plain-docs-orca-916-agent-docs-restructure.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.

A badge renders a short colored label, for a status or anything else worth drawing the eye to.

<Frame>
  <img src="https://mintcdn.com/plain-docs-orca-916-agent-docs-restructure/iAAItm1tmWvvIVSZ/public/images/ui-component-badge.png?fit=max&auto=format&n=iAAItm1tmWvvIVSZ&q=85&s=61099023ff370c5c42b9364115e21ce8" alt="Example badges" width="1664" height="300" data-path="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:

<Snippet file="graphql/ui-badge.mdx" />