How to make button full width in ant design in react js?

Solution

To make button full width in ant design in react js, first, install ant design library using npm install antd command import and use button component from it. To put full width in the button, use the style width 100% and block attribute, then it will make the button full width.

Snippet

In this snippet, see the short example to use button component of ant design library. with the use css style component style={{width: '100%'}}.

<Space
   direction="vertical"
   style={{
   width: '100%',
 }}
>

Example

In this example, we will import the button component from the ant library. use the Space component with style={{width: '100%'}} to make full width button.

Let’s start coding…

App.js

import { Button, Space } from 'antd';
const App = () => (
  <Space
    direction="vertical"
    style={{
      width: '100%',
    }}
  >
    <Button type="primary" block>
      Primary
    </Button>

  </Space>
);
export default App;

Output

Links

Here, we are provided codesandbox links for the above program to make button full width in ant design. 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.