Using Ant Design Buttons in React

Updated: February 13, 2023 By: Hadrianus Post a comment

Ant Design is one of the most popular open-source UI libraries for React with a lot of enterprise-level components. This article walks you through 4 examples of using Ant Design buttons in a React application.


1. Install the required package

npm install antd

Install the icon package (optional):

npm install @ant-design/icons

2. Import the Button component into your React code

import { Button } from 'antd';


A normal primary button

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


Rounded-corner button (pill button)

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


Custom style button

          backgroundColor: "green",
          width: 300,
          height: 100,
          color: "white",
          fontSize: 24,
          fontWeight: "bold",
          borderRadius: 15,
        I'm a button


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={() => {}} >
        <SearchOutlined />



We’ve created some beautiful and professional buttons in React with the Button component from Ant Design. This thing helps us save a lot of time when developing projects. If you’d like to explore more new and interesting stuff about modern React development, take a look at the following articles:

You can also check our React category page and React Native category page for the latest tutorials and examples.

Related Articles