Toggle

A button that stays pressed until it is pressed again.

Toggle.tsx

import {Toggle} from 'alinea/components'
import {IcRoundVisibility} from 'alinea/dashboard/icons'

export function ToggleExample() {
  return (
    <>
      <Toggle defaultPressed icon={IcRoundVisibility}>
        Preview
      </Toggle>
      <Toggle variant="outline">Show drafts</Toggle>
    </>
  )
}

Props

A two-state button that can be either on or off

PropTypeDefaultDescription

pressedbooleanDefault –

defaultPressedbooleanDefault –

onPressedChange(pressed: boolean) => voidDefault –

variant'default' | 'outline'Default –

size'default' | 'sm' | 'lg'Default –

iconIconType | ReactElementDefault –

disabledbooleanDefault –

autoFocusbooleanDefault –

refRef<HTMLButtonElement>Default –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.