Vinh Button Antd

A customizable button component built on top of Ant Design with additional variants and styling.

Installation

npm install vinh-button-antd antd
# or
pnpm add vinh-button-antd antd
# or
yarn add vinh-button-antd antd

Usage

import { VinhButtonAntd } from 'vinh-button-antd';

function App() {
  return (
    <div>
      <VinhButtonAntd variant="primary" size="middle">
        Primary Button
      </VinhButtonAntd>
      
      <VinhButtonAntd variant="secondary" size="large">
        Secondary Button
      </VinhButtonAntd>
      
      <VinhButtonAntd variant="danger" size="small">
        Danger Button
      </VinhButtonAntd>
    </div>
  );
}

Props

The component extends all Ant Design Button props and adds:

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'primary' \| 'secondary' \| 'danger' | 'primary' | Button variant style | | size | 'small' \| 'middle' \| 'large' | 'middle' | Button size |

Features

• 🎨 Three distinct variants (primary, secondary, danger)
• 📏 Three size options (small, middle, large)
• ♿ Full accessibility support from Ant Design
• 🎭 Custom hover and focus animations
• 📦 TypeScript support
• 🔧 Extends all Ant Design Button functionality

Development

Run nx test vinh-button-antd to execute the unit tests via Vitest.

Run nx build vinh-button-antd to build the library.

Run nx storybook vinh-button-antd to view component stories.

License

MIT