toggle-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-example",
  "title": "Toggle",
  "registryDependencies": [
    "toggle",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-nova/examples/toggle-example.tsx",
      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Toggle } from \"@/registry/base-nova/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n              remixicon=\"RiBold\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n              remixicon=\"RiBold\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              remixicon=\"RiItalic\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              remixicon=\"RiItalic\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              remixicon=\"RiUnderline\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              remixicon=\"RiUnderline\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n              remixicon=\"RiBold\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n              remixicon=\"RiBold\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              remixicon=\"RiItalic\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              remixicon=\"RiItalic\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              remixicon=\"RiUnderline\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              remixicon=\"RiUnderline\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}