components

Button

Let users take action and make choices in a single

Source CodeRadix UI

Installation

pnpm dlx radianui@latest add button

Usage

Imports

/components/ui/button.tsx
import {
	Button,
	ButtonGroup,
	CompactButton,
	IconButton,
} from "@/components/ui/button"

Code

/components/ui/button.tsx
<Button>Click Me</Button>

Examples

Button Colors

Button Variants

Button - w/Icon

Size

Button is loading

Disabled

Rounded Button

Button as Input

Icon Button

Compact Button

Button Group

Button Group -w/Icon Button

Button - w/Badge

Social Login Button

Fancy Button - Glossy

Fancy Button - Smooth

Custom Button - Elevated

App Stores Button

Props

<Button>
NameDefaultValues
variantstrongstrongsoftoutlineghostlinkglossyglossy-invertedsmoothsmooth-inverted
colorprimaryprimaryinfosuccesswarningerrorneutral
size36283236404448
disabledfalseboolean
loadingfalseboolean
start-ReactNode
end-ReactNode
asChildfalseboolean
<Buttongroup>
NameDefaultValues
variantoutlinestrongsoftoutlineghostglossy-invertedsmoothsmooth-inverted
colorneutralprimaryinfosuccesswarningerrorneutral
size36283236404448
<CompactButton>
NameDefaultValues
variantstrongstrongsoftoutlineghostglossy-invertedsmoothsmooth-inverted
colorprimaryprimaryinfosuccesswarningerrorneutral
size282832
disabledfalseboolean
asChildfalseboolean