antdesign

Button Ant

Buttons 1

About

Here is Button Ant component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Button Ant to your project and fits it to your theme.

Code

How Button Ant is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import type { MenuProps } from 'antd';
import { Button, Dropdown, Flex } from 'antd';

const onMenuClick: MenuProps['onClick'] = (e) => {
  console.log('click', e);
};

const items = [
  {
    key: '1',
    label: '1st item',
  },
  {
    key: '2',
    label: '2nd item',
  },
  {
    key: '3',
    label: '3rd item',
  },
];

const App: React.FC = () => (
  <Flex align="flex-start" gap="small" vertical>
    <Button type="primary">primary</Button>
    <Button>secondary</Button>
    <Dropdown.Button menu={{ items, onClick: onMenuClick }}>Actions</Dropdown.Button>
  </Flex>
);

export default App;

Dependencies

More by antdesign

View all
  • Menu

    Menu

    22
  • Pagination Ant

    Pagination Ant

    16
  • Dropdown

    Dropdown

    15
  • Breadcrumb

    Breadcrumb

    10
  • FloatButton

    FloatButton

    7
  • Floating Action Menu

    Floating Action Menu

More in Buttons

View all
  • Button Save

    Button Save

    46
  • Button

    Button

    20
  • Eclipse Button

    Eclipse Button

    5
  • Button

    Button

    6
  • Button

    Button

    14
  • Button Group

    Button Group

    37
  • Button

    Button

    32
  • Split Button

    Split Button

    32