toggle.tsx

Overview

The toggle.tsx file defines a reusable, customizable toggle button component for React applications. It leverages the @radix-ui/react-toggle primitive for accessible toggle behavior and enhances it with styling variants using the class-variance-authority (CVA) library. The component supports multiple visual variants and sizes, allowing consistent styling across the application with ease.

This file is designed to be a UI building block, enabling toggling states (on/off) with built-in accessibility and keyboard support, while also providing flexible styling through variant props.

Detailed Documentation

Dependencies

• @radix-ui/react-toggle: Provides the underlying toggle button behavior with accessibility considerations.

• class-variance-authority (cva): Utility for conditional className management based on variants and states.

• React: For component creation.

• cn utility: A helper function (likely a classnames-style utility) imported from @/lib/utils to concatenate and conditionally apply CSS classes.

toggleVariants (constant)

A CVA instance defining the styling variants for the Toggle component.

• Purpose: To generate the appropriate className string based on the component's props such as variant and size.

• Base styles:

  • Flex container with centered content and gap.

  • Rounded corners, small font size, and medium font weight.

  • Interactive hover, focus, disabled, and state-on styles.

  • Support for dark mode and invalid state styles.

  • Controls icon sizes inside the toggle, ensuring consistent sizing and disabling pointer events on SVGs.

• Variants:

  • variant:

    • "default": transparent background.

    • "outline": bordered with shadow, changes background and text color on hover.

  • size:

    • "default": height 36px (h-9), horizontal padding 8px (px-2), minimum width 36px.

    • "sm": smaller height and padding.

    • "lg": larger height and padding.

• Default variants:

  • variant: "default"

  • size: "default"

Usage example:

const className = toggleVariants({ variant: 'outline', size: 'lg' });
// returns the combined class string for outlined large toggle

Toggle Component

A React functional component that wraps TogglePrimitive.Root from Radix UI with additional styling and variant support.

Signature

function Toggle({
  className,
  variant,
  size,
  ...props
}: React.ComponentProps<typeof TogglePrimitive.Root> &
  VariantProps<typeof toggleVariants>)

Parameters

• className (string, optional): Additional custom classes to apply on top of the variant styles.

• variant (string, one of "default" | "outline", optional): Styling variant from toggleVariants.

• size (string, one of "default" | "sm" | "lg", optional): Size variant from toggleVariants.

• ...props: Any other props accepted by TogglePrimitive.Root (e.g., pressed, onPressedChange, disabled, aria attributes).

Returns

• A styled toggle button element (TogglePrimitive.Root) with combined classes and forwarded props.

Behavior & Features

• Adds a data-slot="toggle" attribute for potential styling or targeting.

• Applies the computed className from toggleVariants combined with any passed className.

• Supports all native Radix toggle properties for controlled/uncontrolled usage.

• Maintains accessibility and keyboard navigation by leveraging Radix internals.

Usage Example

import { Toggle } from './toggle';

function Example() {
  const [pressed, setPressed] = React.useState(false);

  return (
    <Toggle
      pressed={pressed}
      onPressedChange={setPressed}
      variant="outline"
      size="lg"
      aria-label="Toggle dark mode"
    >
      Dark Mode
    </Toggle>
  );
}

Implementation Details

• Styling approach: Uses class-variance-authority to manage complex conditional styling based on props and component state.

• Accessibility: Inherits accessibility features from @radix-ui/react-toggle, including keyboard operability, ARIA attributes, and proper focus management.

• SVG handling: Ensures that SVG icons inside the toggle do not interfere with pointer events and have consistent sizing unless they have a class containing 'size-'.

• State styling: Uses Radix’s data-[state=on] attribute selectors to apply different styles when toggled on.

Integration with the System

• This component is a UI primitive meant for use across the application wherever toggle switches are needed.

• It likely integrates with higher-level components or forms, enabling toggling between states (e.g., enabling features, switching modes).

• Works seamlessly with global styling and design systems due to its variant-based styling.

• Depends on a utility function cn from @/lib/utils for class merging, which is presumably used throughout the codebase for consistent className handling.

Diagram: Component Structure and Interaction

componentDiagram
    component Toggle
    component TogglePrimitive.Root
    component cn (class merging utility)
    component toggleVariants (cva styling generator)

    Toggle --> TogglePrimitive.Root : wraps
    Toggle --> toggleVariants : uses for classNames
    Toggle --> cn : merges classNames

    note right of TogglePrimitive.Root
      Provides:
      - Accessibility\n
      - Toggle behavior\n
      - State management
    end

Summary

The toggle.tsx file provides a styled, accessible toggle button component built on Radix UI's toggle primitive and enhanced with flexible variants via CVA. It offers multiple size and style variants, seamless integration with SVG icons, and supports all standard toggle props. This component serves as a foundational interactive element for toggling states in the wider React application.