Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Examples
  • Document tools
  • Managed action
  • Control sizes
  • Controlled state
  • Recommendations
  • Usage boundaries
  • API reference

Actions

Toggle

Switches a command or formatting option on and off.

idle

Usage

import { Toggle } from "@mizen-labs/ui";

Examples

Document tools

Toggle formatting and pin actions independently.

Managed action

Disabled toggles retain their selected or unselected appearance.

Control sizes

Text and icon toggles share the same small, default, and large heights.

Controlled state

Keep the pressed state in application state and announce the result.

Recommendations

GuidancePractice
Do

Name the option being enabled. Keep its label stable between pressed and unpressed states.

Usage boundaries

GuidanceBoundary
Scope

Use Button for a one-time action. Use Switch for an immediate setting with explicit on/off meaning.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
ToggleToggleProps<Value>—A single pressed state; icon-only sizes require aria-label or aria-labelledby.
sizeToggleSize"default"Selects a text or icon size.
variantToggleVariant"default"Selects default or outline treatment.
pressedbooleanfalseControls a single toggle's pressed state.
defaultPressedbooleanfalseSets its initial pressed state.
disabledbooleanfalseDisables native activation and keeps the selected appearance visible.
onPressedChange(pressed, eventDetails) => void—Receives the next boolean state. Cancel the event details to veto the change.
PreviousButton GroupNextToggle group

Project unpinned