Support simple badges

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Broaden the use cases supported by the Chip/Badge component, make it support the use cases of what most designers and developers associate with a "badge".

Examples 🌈

import { Chip } from '@material-ui/core';

<Typography variant="h3">
   Example heading
  <Chip size="xsmall" color="success">New</Badge>
</Typography>

Motivation 🔦

Designers often display "badges" in a wide variety of contexts: table cell, side nav link, headline1 adornment, etc.
The current Chip component tries to solve this problem, but it could likely be improved:

• Broaden the supported colors
• Provide a mode with more density
• Allow changing the shape from circular to rounded

At the same time, we have a Badge component that supports a narrower use case for what most expect with what a "badge" is traditionally used for.

Benchmark

• https://getbootstrap.com/docs/4.5/components/badge/#contextual-variations
• https://theme-ui.com/components/badge
• https://chakra-ui.com/badge
• https://ant.design/components/badge/#components-badge-demo-no-wrapper
• https://tailwindui.com/components/application-ui/elements/badges

Start by reviewing the existing Chip and Badge components, then compare the requested use cases with the linked Bootstrap, Theme UI, Chakra UI, Ant Design, and Tailwind UI examples. The issue needs a settled design for colors, density, shape, and component responsibilities before implementation; done would mean the agreed badge use cases are supported with documented examples.