Support simple badges

[oliviertassinari]

• [x] 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

[cam-cole]

It appears that there is a good set of colors for standard use cases/contexts. Are there other cases for certain colors, or are more colors wanted for personalization such as for Avatar chips?