Button
Displays a button or a component that looks like a button.
Usage
Buttonhas propsvaraintandsize.variantprop decides the in-built style of the component.- However the styling can be overridden using
classNameprops
Variants
SizesDisabledCustom Component
Variants
Default
<Button>Primary</Button>Ghost
<Button variant="ghost">Ghost</Button>Link
<Button variant="link">Link</Button>Secondary
<Button variant="secondary">Secondary</Button>Outline
<Button variant="outline"> Outline </Button>Destructive
<Button variant="destructive">Destructive</Button>Icon Size
<Button variant="outline" size="icon">
<ChevronRight className="h-4 w-4" />
</Button>Sizes
Small
<Button variant="outline" size="sm">
Small
</Button>Large
<Button variant="outline" size="lg">
Large
</Button>Additional Functionality
Disabled
<Button disabled>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Please wait
</Button>Custom Component
<Button asChild>
<a href="/login">Login</a>
</Button>Customizable Design
- Style of every sub-component of the Avatar component can be customized using the
classNameprop. - Pass in a
CSS classor useTailwind CSSutility classes to style the Avatar component.