Using Ant Design Buttons with React.js

This article shows you how to use Ant Design Buttons in a React application.

Installation

1. Install the required package

npm install antd

Install the icon package (optional):

npm install @ant-design/icons

2. Import the packages into your React code

import { Button } from 'antd';
import 'antd/dist/antd.css';

Implement

1. A normal primary button:

<Button type="primary" size="large" >
        I'm a button
</Button>

Output:

2. A rounded-corner button (pill button):

<Button type="danger" size="large" shape="round" >
        I'm a button
</Button>

Output:

3. A customized style button:

<Button
        style={{backgroundColor: "green", width: 300, height: 100, color: "white", fontSize: 24, fontWeight: "bold", borderRadius: 15}}
      >
        I'm a button
</Button>

Output:

4. An icon button:

Import the icon you need:

import { SearchOutlined } from '@ant-design/icons';

And use it with the Button component:

<Button type="primary" size="large" shape="round"
        onClick={() => {}} >
        Search
        <SearchOutlined />
</Button>

Output:

Hope this helps! Happy coding 🙂