Components/Button

Button

form

A versatile button component with multiple variants, sizes, and optional icon support. Built with accessibility in mind and fully customizable via Tailwind CSS.

1Installation

Install the package:

$npm install piece-ui

Import the component:

tsx
1import { Button } from "piece-ui";

2Usage

Basic usage

tsx
1import { Button } from "piece-ui";
2
3export default function Example() {
4  return (
5    <div className="flex gap-3">
6      <Button variant="primary">Get Started</Button>
7      <Button variant="ghost">Learn More</Button>
8      <Button variant="danger">Delete</Button>
9    </div>
10  );
11}

With sizes

tsx
1import { Button } from "piece-ui";
2
3export default function Example() {
4  return (
5    <div className="flex items-center gap-3">
6      <Button size="sm">Small</Button>
7      <Button size="md">Medium</Button>
8      <Button size="lg">Large</Button>
9    </div>
10  );
11}

Loading state

tsx
1import { Button } from "piece-ui";
2
3export default function Example() {
4  return <Button loading>Processing...</Button>;
5}

3Props

PropType
variant
"primary" | "ghost" | "danger"
size
"sm" | "md" | "lg"
icon
React.ReactNode
loading
boolean
disabled
boolean
onClick
() => void
Next
ArticleCard