Button

Displays a button or a component that looks like a button.

The Button component provides a highly customizable button for React applications. It supports various styles, variants, and animations to suit different design needs.

Installation

npx pixelblock-cli add Button

This will copy the Button.tsx file from the PixelBlock templates to your project's components/PixelBlock directory.

your-project/
├── components/
│   └── PixelBlock/
│       └── Button.tsx
└── ...

Usage

After installing the Button component, you can use it in your React application.

Basic Example

Here's a basic example of how to use the Button component in a React application:

import React from "react";
import Button from "./components/PixelBlock/Button";

const App = () => (
  <div>
    <Button color="primary" size="md" radius="md">
      Primary
    </Button>
  </div>
);

export default App;

Variants

Colors

Outline

Size

Radius

Buttons with Icon and Text

Buttons with Only Icon

Buttons with Loading

Props

Prop	Type	Default	Description
variant	string	solid	Defines the style variant ('solid', 'outline', 'ghost', 'link', 'shadow')
size	string	md	Defines the size of the button ('sm', 'md', 'lg')
color	string	primary	Defines the color theme ('default', 'primary', 'secondary', 'success', 'warning', 'error')
radius	string	md	Defines the border radius ('full', 'lg', 'md', 'sm', 'none')
icon	ReactNode		An optional icon element to display inside the button
onClick	function		A callback function triggered on button click