export default function Example() { const MenuButtonMobile = styled(Button, { "@notMd": { display: "none", }, }); const MenuButtonDesktop = styled(Button, { display: "none", "@maxMd": { 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 <MenuButtonMobile icon="center"> <Icon> <Menu /> </Icon> </MenuButtonMobile> </Container> <Container> Desktop first <MenuButtonDesktop icon="center"> <Icon> <Menu /> </Icon> </MenuButtonDesktop> </Container> </Row> </div> ); }