Overview

The Button component is a highly customizable and reusable React component that supports various styles, sizes, and states (e.g., loading, disabled).

Features

Supports multiple visual styles
PrimeStyle
BluSecStyle
YelSecStyle
Etc.

Comes in four sizes
S
M
L
XL

Handles loading and disabled states.

Supports both regular buttons and icon-only buttons.

Optional theme support
dark
light
default

Can be used as a regular button or as a wrapper for custom elements using the
asChild
prop.

Includes a built-in animated loading spinner.

Installation

To install the component run:

npx torch-glare@latest add Button

Basic Usage

Button PrimeStyle

Different Variants

PrimeStyle

BluSecStyle

YelSecStyle

RedSecStyle

BorderStyle

PrimeContStyle

BluContStyle

RedContStyle

PrimeColStyle

BluColStyle

RedColStyle

GreenColStyle

YelColStyle

Button Sizes

Button States

Loading

Disabled

Icon

As Child

Link as Button

Theming

The button supports theming via the `theme` prop. You can apply `dark`, `light`, or `default` themes, also support global theming using the ThemeProvider.

Button With Fixed Light Theme

API

Resize the Table to see the full API values.

prop	type	default
variant	PrimeStyle BluSecStyle YelSecStyle RedSecStyle BorderStyle PrimeContStyle BluContStyle RedContStyle PrimeColStyle BluColStyle RedColStyle GreenColStyle YelColStyle	PrimeStyle
size	S M L XL	M
is_loading	boolean	false
disabled	boolean	false
buttonType	button icon	button
asChild	boolean	false
as	React.ElementType	button
theme	dark light default	default