Toggle

The Toggle component is a two-state button that visually indicates whether it is pressed or not. Built with React Native's Pressable and styled via class-variance-authority, it supports multiple size and variant options with accessible state management.

Preview

Installation

npx novaui-cli add toggle

Import

import { Toggle } from 'novaui-components'

Basic Usage

A simple toggle button with pressed/unpressed states:

import { useState } from 'react'
import { Toggle } from 'novaui-components'

export function BasicToggle() {
  const [pressed, setPressed] = useState(false)

  return (
    <Toggle pressed={pressed} onPressedChange={setPressed}>
      Bold
    </Toggle>
  )
}

Variants

Default

The default variant with transparent background that highlights on press:

<Toggle variant="default" pressed={true} onPressedChange={setPressed}>
  On
</Toggle>
<Toggle variant="default" pressed={false} onPressedChange={setPressed}>
  Off
</Toggle>

Outline

A bordered variant for more prominent toggle buttons:

<Toggle variant="outline" pressed={true} onPressedChange={setPressed}>
  On
</Toggle>
<Toggle variant="outline" pressed={false} onPressedChange={setPressed}>
  Off
</Toggle>

Sizes

Default (h-10)

<Toggle size="default" pressed={true} onPressedChange={setPressed}>
  Default
</Toggle>

Small (h-9)

<Toggle size="sm" pressed={true} onPressedChange={setPressed}>
  Small
</Toggle>

Large (h-11)

<Toggle size="lg" pressed={true} onPressedChange={setPressed}>
  Large
</Toggle>

Disabled State

<Toggle pressed={false} disabled>
  Disabled
</Toggle>

Props API

ToggleProps

Extends React.ComponentPropsWithoutRef<typeof Pressable> and VariantProps<typeof toggleVariants>:

Best Practices

1. Use clear labels: Toggle text should describe the action or setting being toggled
2. Visual feedback: The pressed state should be clearly distinguishable from the unpressed state
3. Use for formatting controls: Toggles work great for text formatting (bold, italic, underline) or view modes
4. Consider ToggleGroup: When you have multiple related toggles, use ToggleGroup for managed state

Related Components

• Use ToggleGroup for a set of related toggle buttons with managed selection
• Use Switch for on/off settings that take immediate effect
• Use Button for actions that are not toggleable