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:closed
  • Created a year ago
  • Reactions:1
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

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!

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:

Read more comments on GitHub >

github_iconTop 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...
Read more >
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...
Read more >
@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 ......
Read more >
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...
Read more >
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.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found