🚀ReacUI is currently in Beta. We're actively improving it! ❣️

Button

A versatile button component with multiple variants and sizes

Installation

The Button component is part of the ReacUI library. Install the package to use it in your project.

npm install reacui

Import

Import the Button component into your React component.

import { Button } from 'reacui';

Button Variants

ReacUI buttons come in several variants to accommodate different design needs and contexts.

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>

Button Sizes

Control the size of buttons using the size prop.

<Button variant="primary" size="sm">Small</Button>
<Button variant="primary" size="md">Default</Button>
<Button variant="primary" size="lg">Large</Button>

Button States

Buttons can be in different states such as disabled or loading.

<Button variant="primary">Default</Button>
<Button variant="primary" disabled>Disabled</Button>
<Button variant="primary" loading>Loading</Button>

Button with Icons

Combine icons with text to create more informative buttons.

<Button variant="primary">
  <PlayIcon className="mr-2" /> Play
</Button>
<Button variant="outline">
  <DownloadIcon className="mr-2" /> Download
</Button>
<Button variant="secondary">
  Send <ArrowRightIcon className="ml-2" />
</Button>

API Reference

The following props are available for the Button component.

Prop	Type	Default	Description
variant	'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'danger'	'primary'	The visual style of the button
size	'sm' \| 'md' \| 'lg'	'md'	The size of the button
disabled	boolean	false	Whether the button is disabled
loading	boolean	false	Whether to show a loading spinner
onClick	function	undefined	Function called when the button is clicked
children	React.ReactNode	undefined	The content of the button