How to change ant design button height in react js?

Solution

To change ant design button height in react js, first install ant design library using npm install antd command import and use button component from it. We have used style attribute to height 50% to change the height of button.

Snippet

In this snippet, see the short example to use the button component of ant design library. with the use of this code icon={<StepBackwardOutlined />} make button with an icon.

<Button style={{ height: 50, backgroundColor:"pink" }}>
  My Button
</Button>

Example

In this example, we will import the button component from the ant library, and use CSS style style={{ height: 50}}. it will change the height of the button.

Let’s start coding…

App.js

import { Button } from 'antd';

export default function App() {
  return (
    <Button style={{ height: 50, backgroundColor:"pink"}}>
      My Button
    </Button>
  );
}

Output

Links

Here, we are provided code sandbox links for the above program change ant design button height. Then you can use whenever you went and do the changes as per your requirements.

codesandbox

Happy Coding,

I hope the above example with help you to do your task.