Menu variant

[robyn-bautista]

Hi Paste team!

We are updating a menu dropdown to allow for quick updates to a status. We would like to apply a different color treatment to the menu dropdown to match badge colors, however it looks like we're unable to change the colors as this variant doesn't exist. We also attempted using the button instead, but it doesn't quite fit the styles we're looking for.

We'd like to propose adding a variant to the menu dropdown to accommodate - any advisement here? Thank you!

• Button vs menu
• Button and button hack
• Original design

https://www.figma.com/file/4e366pjcsNYG0yohe4RzFU/P0-Final---Interaction-states-and-topics?node-id=1267%3A206479&t=smF2zY85tep1Su4D-1

[SiTaggart]

Hi @robyn-bautista

Thanks for the question. We'd be curious to see the full context this component is designed to be used in, to give a better and more informed answer.

Some questions off the bat include;

• Where is this component used? In a form? Inside another component? Where on the page?
• What purpose does the color coding serve? What does the text not achieve on its own?
• Have you explored using a badge?

Thanks

[robyn-bautista]

Got it, this is helpful, thank you! So if I'm understanding correctly, 1 + 2 would be in line with current components (and the status menu being built):

https://www.figma.com/file/4e366pjcsNYG0yohe4RzFU/P0-Final---Interaction-states-and-topics?node-id=1267%3A206479&t=smF2zY85tep1Su4D-1

[serifluous]

Yep, 1 and 2 are doable with the current components. 1 would be the recommended way to do it since 2 is a lil too box-within-a-box-y.

We're also going to be creating a variant of the badge with a white instead of gray background if that works better for you: https://www.figma.com/file/KUOgqFmTe46GOAvQNOhRnY/Navigation-UI-Kit?node-id=993-267622&t=eTgfNgdDiME5gsuk-4

[robyn-bautista]

Thank you! when is the badge menu slated to be built/released?

I'm also wondering if we could still potentially bring what was done in option 1 to option 2 - we could potentially do some testing on our end with the original option versus icons in option 1

[loreina]

Hi @robyn-bautista, you can create this status badge using our components today.

Here's a barebones codesandbox example of what it would look like: https://codesandbox.io/s/bold-lalande-ddo8nn?file=/src/index.tsx. We'll add a status badge example to our docs site later as well.

Hope this helps!