Badges

[LudoLogical]

Story

As a user, I want to see colored labels for items belonging to a group, collection, or class.

Description

Create a React component, Badge, that can be configured to appear in all of the styles shown in the Figma file for Shipfaster UI. Badge should be located in the shared component library. Note that this may, though does not necessarily have to, involve adding color definitions to packages/tailwind-config/tailwind.config.js.

Acceptance Criteria

1. Badges can have a size of either 'sm', 'md', or 'lg'.
2. Badges can have a type of either 'primary', 'neutral', 'success', 'warning', or 'danger'.
3. Badges can have an appearance of either 'filled', 'accent', or 'outlined'.
4. Badges can optionally visually respond to being in a hover state.
5. Badges can optionally be disabled.
6. Badges can have text, an Icon, or both. The Icon can appear on either side of the text if both are present.

Notes

None