Search code examples
reactjsnext.jschakra-ui

Chakra-UI - how to modify ButtonGroup when screen becomes small?

I am recently learning NextJS with Chakra-UI. However, I faced some difficulties with responsive UI.

Here is the screenshot.

enter image description here

<Box mt={5}>
   <LightMode>
     <ButtonGroup>
         {socialButtons.map((social) => (
            <SocialButton social={social} key={social.name}/>
         ))}
     </ButtonGroup>
   </LightMode>
</Box>

How can I move the button to bottom to match screen's responsive?

Solution

  • It would be best if you used flexbox. And remember, ButtonGroup composes of the Box component so that you can pass all its props. Box components It's just a div element.

       <Box mt={5}>
    <LightMode>
      <ButtonGroup display={'flex'} flexWrap={'wrap'}>
        <Button colorScheme="teal" size="lg" margin={'8px'}>
          Button
        </Button>
        <Button colorScheme="teal" size="lg" margin={'8px'}>
          Button
        </Button>
        <Button colorScheme="teal" size="lg" margin={'8px'}>
          Button
        </Button>
        <Button colorScheme="teal" size="lg" margin={'8px'}>
          Button
        </Button>
      </ButtonGroup>
    </LightMode>
  </Box>