New Component: Badge

[richardtape]

• I have performed the cursory search

Problem description
A badge provides a consistent visual labelling system for inline meta information. i.e. Number of articles, highlighting when something is 'new' etc.

Proposed solution

https://codepen.io/richardtape/pen/QWbaqEd?editors=1100

In its isolated form, the badge component has practically no unique accessibility considerations (beyond what is expected for all components in the DEF) - it's simply a box with some text in it. However, for the vast majority of the time the badge component will be providing meta information to the item that surrounds it and thus will need to include appropriate attributes or content that give the badge context.

The proposed CSS for the badge component uses inline-flex as value for the display property. This will make vertically centring this component within a parent element considerably easier.

Alternatives considered

https://getbootstrap.com/docs/4.4/components/badge/ and https://github.com/DavideTriso/aria-badge were looked at and both provide the same markup and considerations that is provided in the proposed solution here.

Additional context

https://codepen.io/richardtape/pen/QWbaqEd?editors=1100

The badge component as proposed here differs slightly from the CLF 7 badge component which used the label class, which caused issues with the label element in some contexts.

Feature Review Checklist:

• HTML Markup
• CSS
• JS (if applicable)
• Responsive Behaviour
• UX
• Design
• Web Accessibility
• Documentation