Page
Variant
All available button variants with different states
default
default with icon
default icon only
default disabled
default loading
plain
plain with icon
plain icon only
plain disabled
plain loading
ghost
ghost with icon
ghost icon only
ghost disabled
ghost loading
dark/gray
dark/gray with icon
dark/gray icon only
dark/gray disabled
dark/gray loading
light
light with icon
light icon only
light disabled
light loading
dark/white
dark/white with icon
dark/white icon only
dark/white disabled
dark/white loading
dark
dark with icon
dark icon only
dark disabled
dark loading
gray
gray with icon
gray icon only
gray disabled
gray loading
white
white with icon
white icon only
white disabled
white loading
red
red with icon
red icon only
red disabled
red loading
orange
orange with icon
orange icon only
orange disabled
orange loading
amber
amber with icon
amber icon only
amber disabled
amber loading
yellow
yellow with icon
yellow icon only
yellow disabled
yellow loading
lime
lime with icon
lime icon only
lime disabled
lime loading
green
green with icon
green icon only
green disabled
green loading
emerald
emerald with icon
emerald icon only
emerald disabled
emerald loading
teal
teal with icon
teal icon only
teal disabled
teal loading
cyan
cyan with icon
cyan icon only
cyan disabled
cyan loading
sky
sky with icon
sky icon only
sky disabled
sky loading
blue
blue with icon
blue icon only
blue disabled
blue loading
indigo
indigo with icon
indigo icon only
indigo disabled
indigo loading
violet
violet with icon
violet icon only
violet disabled
violet loading
purple
purple with icon
purple icon only
purple disabled
purple loading
fuchsia
fuchsia with icon
fuchsia icon only
fuchsia disabled
fuchsia loading
pink
pink with icon
pink icon only
pink disabled
pink loading
rose
rose with icon
rose icon only
rose disabled
rose loading
Size
Compares all available button sizes: sm, md, and lg.
sm
sm
sm icon only
md
md
md icon only
lg
lg
lg icon only
With Render Prop
Using render prop to create buttons that render as links or other elements
Overflow
The button component handles text overflow when the content exceeds the available width.