components

Button

Let users take action and make choices in a single

Source CodeRadix UI
Loading

Installation

Usage

Imports

/components/ui/button.tsx

Code

/components/ui/button.tsx

Examples

Variant - Outline

Loading

Variant - Soft

Loading

Variant - Ghost

Loading

Fancy Button

Loading

With Icon

Loading

Icon Only

Loading

Size

Loading
Loading

Compact Button

Loading

Loading Button

Loading

Disabled

Loading

Svg Buttons

Loading

Social Buttons

Loading

Button Group

Loading

Button Group Loading

Loading

Split Button

Loading

Props

<Button>
NameDefaultValues
variantstrongstrongsoftoutlineghost
colorprimaryprimaryinfosuccesswarningerrorneutral
size36283236404448
disabledfalseboolean
loadingfalseboolean
start-ReactNode
end-ReactNode
asChildfalseboolean
<Buttongroup>
NameDefaultValues
variantoutlinestrongsoftoutlineghost
colorneutralprimaryinfosuccesswarningerrorneutral
size36283236404448
<CompactButton>
NameDefaultValues
variantstrongstrongsoftoutlineghost
colorprimaryprimaryinfosuccesswarningerrorneutral
size282832
disabledfalseboolean
asChildfalseboolean
<LinkButton>
NameDefaultValues
size141416
disabledfalseboolean
variantstrongstrongsoftoutlineghost
colorprimaryprimaryinfosuccesswarningerrorneutral