How to add a box around an icon

[pradyuk]

Is it possible to add a box around the "ChevronExpand" icon as shown in the attached image? If yes, can you please help me with some example code?

[richbachman]

Hi @pradyuk

The box should be using a Menu component. This might be a good place to start: https://paste.twilio.design/components/menu#choosing-a-menu-trigger

The MenuButton is basically a wrapper around our Button component. Although not fully documented, we do have a variant named inverse for button. So you're MenuButton code might look something like this:

<MenuButton {...menu} variant="inverse" size="icon">
    <ChevronExpandIcon
        decorative={false}
        title="Choose account"
        color="colorTextInverse"
    />
</MenuButton>

Let us know if that's helpful.

[pradyuk]

Thanks for the reply @richbachman. I tried this, but did not have much luck getting the border around the button. Will it help if you saw the PR maybe? https://code.hq.twilio.com/twilio/console/pull/98

[richbachman]

Looking at your PR, I'm seeing variant="reset" and size="reset" You'll need to change those to variant="inverse" size="icon". See if this codesandbox helps: https://codesandbox.io/s/header-box-example-lo35j?file=/src/index.tsx

[pradyuk]

Thanks again @richbachman!