export default function Example() { const MenuButton = styled(Button, { variants: { hidden: { true: { display: "none", }, false: { display: "inline-block", }, }, }, }); const Container = styled("div", { display: "flex", justifyContent: "space-between", backgroundColor: theme.colors.secondary, boxShadow: theme.shadows["200"], color: theme.colors.onSecondary, padding: theme.space["100"], width: "150px", height: "150px", }); const Row = styled("div", { display: "flex", gap: theme.space["100"], }); return ( <div> <p>Show a menu button below the medium breakpoint</p> <Row> <Container> Mobile first <MenuButton icon="center" hidden={{ "@initial": false, "@notMd": true }} > <Icon> <Menu /> </Icon> </MenuButton> </Container> <Container> Desktop first <MenuButton icon="center" hidden={{ "@initial": true, "@maxMd": false }} > <Icon> <Menu /> </Icon> </MenuButton> </Container> </Row> </div> ); }