Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

💡 Proposal - Badge component: Pass Icon component

See original GitHub issue

Forma 36 contribution proposal

The problem

In User Interface, there are some use cased where Badge is being used with an Icon / Image as a child component, however, this breaks the layout:

I understand it is also used in launch, with some color inconsistencies:

Currently, i’m having to add additional css to fix this, e/g give the Icon absolute positioning.

The proposed solution

Add an icon prop to the Badge, similar to how IconButton works.

Breaking changes

I don’t believe so.

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:9 (4 by maintainers)

Top GitHub Comments

2reactions

denkristoffercommented, Sep 8, 2022

Hey @Wake1st, yes absolutely, that would be great 🙌 Let us know if you need any support, we’re happy to help!

2reactions

fabecommented, Aug 25, 2022

Thanks for the proposal! We should create some consistency here.

I’d suggest we add startIcon and endIcon props similar to how icons work in the Button component. We’ll write some guidelines on when to use start vs. end, happy to take that on. Let’s also make sure we align the icon color with the label color:

Top Results From Across the Web

How to pass mui-icon component as props to another ...

You should be able to pass a component down to a child component via props just like a normal variable. There is one...

Badge - React Native Elements

Badges are small components typically used to communicate a numerical value or. ... The withBadge HOC allows you to easily add badges to...

@mui/icons-material | Yarn - Package Manager

This package provides the Google Material Icons converted to SvgIcon components. Installation. Install the package in your project directory with: // with npm ......

Badge - React Spectrum Libraries - Adobe

Content#. Badges can have a label, an icon, or both. An icon is provided by passing an icon component as a child to...

Molly Hellmuth on Twitter: "💡 Figma Tip: “Nest” related ...

For example, “nest” icon properties for a badge 1. ... This way, users will know more about a component before toggling props.