ToggleButton – Once UI

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.

Basic usage

Selected

Default

Link

<ToggleButton selected label="Selected" />
<ToggleButton label="Default" />
<ToggleButton label="Link" href="#" />

Icons

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

With icons

Back

Forward

<ToggleButton label="Back" prefixIcon="chevronLeft" />
<ToggleButton label="Forward" suffixIcon="chevronRight" />

Sizes

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

Sizes

<ToggleButton label="XS" size="xs" />
<ToggleButton label="S" size="s" />
<ToggleButton label="M" size="m" />
<ToggleButton label="L" size="l" />
<ToggleButton label="XL" size="xl" />

Variants

Choose from ghost, outline, or subtle variants.

Variants

Ghost

Outline

Subtle

<ToggleButton variant="ghost" label="Ghost" />
<ToggleButton variant="outline" label="Outline" />
<ToggleButton variant="subtle" label="Subtle" />

Radius

Customize rounding for each side or corner.

Radius

Left radius

No radius

Top right radius

<ToggleButton variant="outline" label="Left radius" corners="left" />
<ToggleButton variant="outline" label="No radius" radius="none" />
<ToggleButton variant="outline" label="Top right radius" corners="top-right" />

Alignment

Customize content alignment.

Alignment

Center

End

Space between

<ToggleButton variant="outline" label="Center" horizontal="center" fillWidth />
<ToggleButton variant="outline" label="End" horizontal="end" fillWidth suffixIcon="chevronRight" />
<ToggleButton variant="outline" label="Space between" horizontal="between" fillWidth prefixIcon="check" suffixIcon="chevronDown" />

Custom content

You can pass custom content to the toggle button.

Custom content

Dashboard

New

Notifications

<ToggleButton variant="outline">
  <Row vertical="center" gap="8">
    Dashboard
    <Tag label="New" size="s"/>
  </Row>
</ToggleButton>
<ToggleButton variant="outline">
  <Row vertical="center" gap="8">
    Notifications
    <StatusIndicator size="s"/>
  </Row>
</ToggleButton>

API reference

Prop	Type	Default
label	ReactNode	—
selected	boolean	false
variant	ghostoutlinesubtle	ghost
size	xllmsxs	m
radius	xllmsxsnonefull	—
corners	nonetoprightbottomlefttop-lefttop-rightbottom-rightbottom-left	—
rounded Fully rounded corners.	boolean	false
horizontal	startcenterendbetween	center
fillWidth	boolean	false
weight	defaultstrong	default
truncate	boolean	false
disabled	boolean	false
prefixIcon	IconName	—
suffixIcon	IconName	—
className	string	—
style	React.CSSProperties	—
children	React.ReactNode	—
href	string	—
…and every React.ButtonHTMLAttributes prop	inherited	—