Developer mode
Opens components on the React tab by default.
Your bookmarks

Badge / Figma

Presents users with short, relevant information.

If you’re adding a new icon in Figma, you need to adjust the color. When you change the icon, the icon color gets changed to the default icon color. All Orbit icons have their defaults set to Ink / Normal.

After adding your icon, click the current color in the right sidebar (under Selection Colors) and select the color you want.

Which color to choose for which badge?

To get the right icon color, choose the right value from the table below.

Badge typeColor (in Figma)
NeutralInk / Normal
InfoBlue / Normal
Success Green / Normal
WarningOrange / Normal
CriticalRed / Normal