Solution

To align right ant design button in react js, first install ant design library using npm install antd command import and use the button component from it. and use the style attribute to align the right. Then the button will show on the right side..

Snippet

In this snippet, see the short example to use button component of ant design library, with use CSS style style={{ textAlign: 'right' }}.

    <div style={{ textAlign: 'right' }}>
      <Button style={{ marginLeft: 'auto' }} type="primary">Right Aligned Button</Button>
    </div>

Example

In this example, we will import the button component from the ant library, and use <div> element with CSS style style={{ textAlign: 'right' }}, button component as a primary type of ant design library.

Let’s start coding…

App.js

import { Button } from 'antd';

function App() {
  return (
    <div style={{ textAlign: 'right' }}>
      <Button style={{ marginLeft: 'auto' }} type="primary">Right Aligned Button</Button>
    </div>
  );
}

export default App;

Output

Ant-design, button

Here, we are provided code sandbox links for the above program align right ant design button. 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.