Toggle

눌림/해제 상태를 전환하는 토글 버튼입니다. Radix UI Toggle 기반.

Installation

bash

npx axis-cli add toggle

tsx

import { Toggle } from '@axis-ds/ui-react'

export function Example() {
  return <Toggle aria-label="Toggle bold">B</Toggle>
}

tsx

<Toggle variant="outline" aria-label="Toggle italic">
  I
</Toggle>

Prop	Type	Default	Description
`pressed`	`boolean`	-	눌림 상태 (controlled)
`defaultPressed`	`boolean`	false	기본 눌림 상태
`onPressedChange`	`(pressed: boolean) => void`	-	상태 변경 콜백
`variant`	`"default" \| "outline"`	"default"	토글 스타일 변형
`size`	`"default" \| "sm" \| "lg"`	"default"	토글 크기
`disabled`	`boolean`	false	비활성화 여부

pressed

Type:boolean

Default:-

눌림 상태 (controlled)

defaultPressed

Type:boolean

Default:false

기본 눌림 상태

onPressedChange

Type:(pressed: boolean) => void

Default:-

상태 변경 콜백

variant

Type:"default" | "outline"

Default:"default"

토글 스타일 변형

size

Type:"default" | "sm" | "lg"

Default:"default"

토글 크기

disabled

Type:boolean

Default:false

비활성화 여부

Radix UI Toggle 기반으로 aria-pressed로 눌림 상태를 표현합니다.

Key	Action
`Space / Enter`	눌림 상태를 토글합니다.