Hi @bhaveshraja, I'm tightening up the badge (the small rounded pill of text, like a status tag or a "Paid" / "Free" label) and want to get the defaults right from you.
For each thing below, could you tell me whether it should always look this way (I'll bake it in so it stays consistent and nobody has to think about it), or whether it should be adjustable depending on where it's used?
-
The color set. A badge can be one of about a dozen colors (neutral, grey, brand blue, green, yellow, red, orange, and so on), each a soft fill with matching text. Should the team only ever pick from that fixed set, or do you want them able to set custom colors?
-
The three sizes. We offer small, base, and large. Should those be the only options, and should the text size, padding, and corner roundness for each always be locked together the way they are now?
-
The leading icon. A badge can have a small icon before the text. Right now that icon is automatically sized to match the badge size and tinted to match the badge color. Should that always be the rule (icon follows the badge's size and color), or should someone be able to give the icon its own size or color?
-
The Paid / Free plan look. In Figma the plan badges map straight onto our existing colors: Paid uses the brand blue, Free uses neutral grey. Is that mapping correct and permanent, or might a plan badge want its own distinct treatment later?
-
The corner roundness. Badges have softly rounded corners today. Always that amount, or could some contexts want fully pill-shaped (rounder) or squarer?
Anything you mark "always," I'll build into the component. Anything that's "depends," I'll leave open for the team to set. Thanks!
Hi @bhaveshraja, I'm tightening up the badge (the small rounded pill of text, like a status tag or a "Paid" / "Free" label) and want to get the defaults right from you.
For each thing below, could you tell me whether it should always look this way (I'll bake it in so it stays consistent and nobody has to think about it), or whether it should be adjustable depending on where it's used?
The color set. A badge can be one of about a dozen colors (neutral, grey, brand blue, green, yellow, red, orange, and so on), each a soft fill with matching text. Should the team only ever pick from that fixed set, or do you want them able to set custom colors?
The three sizes. We offer small, base, and large. Should those be the only options, and should the text size, padding, and corner roundness for each always be locked together the way they are now?
The leading icon. A badge can have a small icon before the text. Right now that icon is automatically sized to match the badge size and tinted to match the badge color. Should that always be the rule (icon follows the badge's size and color), or should someone be able to give the icon its own size or color?
The Paid / Free plan look. In Figma the plan badges map straight onto our existing colors: Paid uses the brand blue, Free uses neutral grey. Is that mapping correct and permanent, or might a plan badge want its own distinct treatment later?
The corner roundness. Badges have softly rounded corners today. Always that amount, or could some contexts want fully pill-shaped (rounder) or squarer?
Anything you mark "always," I'll build into the component. Anything that's "depends," I'll leave open for the team to set. Thanks!