Toggle

import { Toggle } from '@hanzo/ui'

Default

A plain toggle button, off until it is pressed.

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

Outline

The same button with its own edge instead of a filled well.

export function Outline() {
  return (
    <Toggle variant="outline" aria-label="Toggle italic">
      Italic
    </Toggle>
  )
}

Sizes

Small, default and large, on the same ladder a Button uses.

export function Sizes() {
  return (
    <XStack gap="$3" items="center">
      <Toggle size="sm" aria-label="Toggle italic">
        A
      </Toggle>
      <Toggle size="default" aria-label="Toggle italic">
        A
      </Toggle>
      <Toggle size="lg" aria-label="Toggle italic">
        A
      </Toggle>
    </XStack>
  )
}

Controlled

The caller owns the pressed state and reads it back out.

off

export function Controlled() {
  const [pressed, setPressed] = useState(false)
  return (
    <XStack gap="$3" items="center">
      <Toggle pressed={pressed} onPressedChange={setPressed} aria-label="Toggle underline">
        Underline
      </Toggle>
      <span>{pressed ? "on" : "off"}</span>
    </XStack>
  )
}

Types

export type ToggleVariant = 'default' | 'outline'

export type ToggleSize = 'default' | 'sm' | 'lg'

export type ToggleProps = Omit<
  ComponentProps<typeof ToggleFrame>,
  'variant' | 'size' | 'onPress' | 'children' | 'onClick'
> & {
  variant?: ToggleVariant | null
  size?: ToggleSize | null
  /** Controlled pressed state. */
  pressed?: boolean
  /** Initial pressed state when uncontrolled. */
  defaultPressed?: boolean
  onPressedChange?(pressed: boolean): void
  disabled?: boolean
  children?: ReactNode
  /** The DOM button type — a bare button inside a form defaults to submit. */
  type?: 'button' | 'submit' | 'reset'
  /** The DOM click, on the real `<button>` this renders as. */
  onClick?: MouseEventHandler<HTMLElement>
}

Exports

Toggletype TogglePropstype ToggleSizetype ToggleVariant