Components

Component

ToggleButton

Button-shaped control for toggling an immediate on/off state.

ReactReact Native7 props
PreviewReact

Imports

import { ToggleButton } from "@hozorica/hods-react/toggle-button";
import { ToggleButton } from "@hozorica/hods-react-native/toggle-button";

Props

PropTypeDescription
variantbrandSolid | neutralWeakVisual treatment. Defaults to brandSolid.
sizexsmall | smallButton height and text density.
loadingbooleanShows loading state without changing pressed state.
disabledbooleanDisables user interaction.
pressed / defaultPressedbooleanControlled and uncontrolled pressed state.
onPressedChange(pressed) => voidCalled after user toggles the button.
asChildbooleanWeb-only child composition.

Platform Support

React

Accessible aria-pressed button with controlled/uncontrolled pressed state, loading, and asChild support.

React Native

Pressable toggle button with selected and busy accessibility state.

Usage

<ToggleButton pressed={pressed} onPressedChange={setPressed}>{pressed ? "선택됨" : "미선택"}</ToggleButton>

Notes

  • Use ToggleButton for immediate state changes like filters and view modes.
  • Use Switch for persistent settings with a stronger on/off affordance.