Skip to content
TrademarkTrademark
Docs
Components

ToggleButton

Updated: June 30, 2026
View on GitHub

ToggleButton provides a flexible button-like element that can act as a toggle, tab, or segmented control. It supports selected state, prefix/suffix icons, and optional link behavior.

Icons

You can attach icons to the left or right using prefixIcon and suffixIcon.

Sizes

Available in extra small, small, medium, large, and extra large.

Variants

Choose from ghost, outline, or subtle variants.

Radius

Customize rounding for each side or corner.

Alignment

Customize content alignment.

Custom content

You can pass custom content to the toggle button.

API reference

Type
Default
label
ReactNode—
selected
booleanfalse
variant
ghostoutlinesubtle
ghost
size
xllmsxs
m
radius
xllmsxsnonefull
—
corners
nonetoprightbottomlefttop-lefttop-rightbottom-rightbottom-left
—
rounded
Fully rounded corners.
booleanfalse
horizontal
startcenterendbetween
center
fillWidth
booleanfalse
weight
defaultstrong
default
truncate
booleanfalse
disabled
booleanfalse
prefixIcon
IconName—
suffixIcon
IconName—
className
string—
style
React.CSSProperties—
children
React.ReactNode—
href
string—
…and every React.ButtonHTMLAttributes propinherited—
Edit this page on GitHub