Button

Component

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
BlueSecStyle
YelSecStyle
Etc.

Comes in three 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

BlueSecStyle

YelSecStyle

RedSecStyle

BorderStyle

PrimeContStyle

BlueContStyle

RedContStyle

Button Sizes

Button States

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 BlueSecStyle YelSecStyle RedSecStyle BorderStyle PrimeContStyle BlueContStyle RedContStyle	PrimeStyle
size	S M L	M
is_loading	boolean	false
disabled	boolean	false
buttonType	button icon	button
asChild	boolean	false
as	React.ElementType	button
theme	dark light default	default

Basic Usage Different Variants Button Sizes Button States Theming

API