Skip to content

Support simple badges #22471

Open
Open
@oliviertassinari

Description

@oliviertassinari
  • 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>

Capture d’écran 2020-09-04 à 01 30 42

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    component: badgeThis is the name of the generic UI component, not the React module!new featureNew feature or requestwaiting for 👍Waiting for upvotes

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions