heroui-zip-button
Version:
A customizable HeroUI Zip Button component
66 lines (47 loc) • 1.32 kB
Markdown
# HeroUI Zip Button
A customizable button component built with HeroUI, featuring various sizes and variants.
## Installation
```bash
npm install heroui-zip-button
# or
yarn add heroui-zip-button
```
## Usage
```tsx
import { ZipButton } from 'heroui-zip-button';
function App() {
return (
<ZipButton
size="md"
variant="solid"
>
Click me
</ZipButton>
);
}
```
## Props
The ZipButton component extends HeroUI's Button component with the following variants:
### Size Variants
- `sm`: Small button with rounded corners
- `md`: Medium button with rounded corners (default)
### Style Variants
- `solid`: Filled button (default)
- `bordered`: Transparent button with border
- `ghost`: Ghost style button
### Disabled State
- `isDisabled`: When true, applies disabled styling
### Compound Variants
The component includes several compound variants that combine size and style variants:
#### Small (sm)
- `solid`: Blue background with white text
- `bordered`: Blue border with blue text and hover effect
#### Medium (md)
- `solid`: Light blue background with white text
- `ghost`: Transparent with blue border and text
## Dependencies
This component requires:
- React >=16.8.0
- @heroui/react >=1.0.0
## License
MIT