Button

The Button component is an interactive button that supports multiple variants and states.

Installation

Add NapUI to your project if you haven't already:

npm install napui-kit

Usage

Basic button

App.tsx

import { Button } from "napui-kit";

export default function Basic() {
  return (
    <Button size="md" type="basic" onClick={() => alert("Clicked!")}>
      Click Me
    </Button>
  );
}

Button with Icon

App.tsx

import { Button } from "napui-kit";

export default function WithIcon() {
  return (
    <Button size="lg" type="success" icon={<Check />}>
      Click Me
    </Button>
  );
}

Wallet button

App.tsx

import { Button } from "napui-kit";

export default function Wallet() {
  return (
    <Button size="lg" type="wallet">
      Connect Wallet
    </Button>
  );
}

Variants

The Button component supports different types:

Type	Description
basic	Standard button with a primary background color
warning	Displays a warning icon and orange background
error	Displays an error icon and red background
success	Displays a success icon and green background
wallet	Special button for connecting a Web3 wallet

Sizes

The component supports different sizes:

Size	Description
sm	Small button
md	Medium button
lg	Large button
xl	Extra large button

Props

Prop	Type	Description
size	"sm" | "md" | "lg" | "xl"	Sets the button size
type	"basic" | "warning" | "error" | "success" | "wallet"	Defines the button's style
icon	React.ReactNode	Optional icon to display
onClick	() => void	Function triggered when clicking the button
className	string	Additional CSS classes