🧱 ZUI: Badge

[ziggabyte]

Description

A little badge to represent a status, and optionally a number

Screenshots

Figma link

You need to be logged into a Figma account to properly view the Figma content.
https://www.figma.com/design/yIQMDEFSgkUOrSaJpg3k7N/ZUI?node-id=11009-142434&t=XDq42a8E5ncUc5kk-4

Requirements

• Matches styles as given in Figma
• Optionally takes in a number
• If no number, just a small dot
• Takes in a status, which decides the color

Possible implementations

Look at ZUIStatusChip for example of how to use the statuses.

Develop this using Storybook. We want all the design system components to be documented through their own Storybook stories.

For reference, you can look at the already existing ZUI components created on the undocumented/new-design-system branch (not ZUI components that exist on main, as they are not part of the new design system.)

Git

The main git branch for the work on the new design system is undocumented/new-design-system. Unless otherwise instructed, do your work on a new branch branched off from this branch.

Name your branch issue-number/zui-name, ex: issue-928/zui-button for a branch where work is done that is documented in the issue with number 928, where a button component is being made.

[KraftKatten]

I'll take a look at this :)