> For the complete documentation index, see [llms.txt](https://docs.klai.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.klai.studio/engineering-reference-docs/software-testing-overview/ux-ui-checklist/elements/badge.md).

# Badge 📛

* [ ] Detail

  A badge can have a numeric value, or a basic shape

  ⭐️ A basic shape like a small circle is effective in conveying one update, while numeric value represents the amount of updates
* [ ] Color

  Badges can represent your standard states - error, success, warning

  ⭐️ Be consistent in the details - outlines, shadows, perspective, corners and colours
* [ ] Offset position

  A badge should sit outside it's relevant element to gain attention easier