Toggle

A two-state button that switches between pressed and unpressed — used in toolbars and filter controls.

When To Use

Use buttons for explicit user-triggered actions such as submit, save, continue, or open.
Choose the variant and size that matches the action hierarchy in the surrounding view.
Prefer this page when you need to compare action density, icon usage, and loading or disabled states side by side.

Do not use a button when plain text, static status, or passive decoration would communicate the state just as well.
Do not overload a single view with too many equally prominent buttons; reduce or demote secondary actions first.

Keep a visible label or an equivalent accessible name attached to the control.
Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.

Variant props

variant, size

Key exports

ToggleRoot, toggleVariants

import { Toggle } from "@hilum/ui"

<Toggle>Bold</Toggle>
<Toggle>Italic</Toggle>
<Toggle defaultPressed>Underline</Toggle>

Default

Standard toggle with text label

Outline

With border and background

Brand

Active state uses brand-primary fill

With icons

Icon-only · default and outline

Sizes

sm · default · lg

Disabled

Disabled unpressed and pressed states