Mantine UI : Button Padding Change

How to customize button padding in Mantine UI Button component. Mantine UI core button padding customization code.

 styles={{
            root: { 
            padding: 5,
            margin: 0,
            height:'60px'
           },

Example:

        <Button
          key={value}
          variant={response === value ? "gradient" : "default"}
          gradient={{ from: '#62CBE6', to: '#3F5BA9' }}
          onClick={() => updateResponse(value)}
          sx={{ minHeight: '30px', maxWidth: '70px', maxHeight: '70px' }}
          styles={{
            root: { 
            padding: 5,
            margin: 0,
            height:'60px'
           },
            inner: { padding:'0px' } }}
        >
          
          <Image src={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/images/smileys/${value}.png`} width={25} height={25} />
         

        </Button>

About the Author: smartcoder

You might like

Leave a Reply

Your email address will not be published. Required fields are marked *