Downcity
Components

Toggle

Use for single pressed-state controls and toolbar toggles

Toggle

Toggle is for a single pressed-state action.

Import

import { Toggle } from "@downcity/ui";

Basic Example

import { Toggle } from "@downcity/ui";
import { BoldIcon } from "lucide-react";

export function BoldToggle() {
  return (
    <Toggle aria-label="Toggle bold">
      <BoldIcon />
    </Toggle>
  );
}

Variants

  • default
  • outline

Sizes

  • default
  • sm
  • lg

Usage Notes

  • Use Toggle for a single on/off pressed state
  • Use ToggleGroup for grouped options
  • It works especially well in icon-based toolbars
  • Toggle
  • toggleVariants

Textarea

Use for prompts, long descriptions, and multi-line configuration input

ToggleGroup

Use for grouped single-select or multi-select toggle controls

Table of Contents

ToggleImportBasic ExampleVariantsSizesUsage NotesRelated Exports