@commercetools/nimbus-mcp 0.1.0 → 2.11.0

package/data/docs/routes/components-buttons-toggle-button.json

@@ -0,0 +1,689 @@
+{
+  "meta": {
+    "id": "Components-ToggleButton",
+    "title": "Toggle button",
+    "exportName": "ToggleButton",
+    "description": "An interactive button that toggles between two binary states such as active and inactive.",
+    "lifecycleState": "Stable",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/components/toggle-button/toggle-button.mdx",
+    "menu": [
+      "Components",
+      "Buttons",
+      "Toggle button"
+    ],
+    "route": "components/buttons/toggle-button",
+    "tags": [
+      "component",
+      "buttons",
+      "toggle",
+      "controls"
+    ],
+    "toc": [
+      {
+        "value": "Overview",
+        "href": "#overview",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Resources",
+        "href": "#resources",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Variables",
+        "href": "#variables",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Visuals",
+        "href": "#visuals",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Outlined",
+        "href": "#outlined",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Ghost",
+        "href": "#ghost",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Color palette",
+        "href": "#color-palette",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Primary (default)",
+        "href": "#primary-default",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Neutral",
+        "href": "#neutral",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          2,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Critical",
+        "href": "#critical",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          2,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Info",
+        "href": "#info",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          2,
+          4
+        ],
+        "parent": "root"
+      }
+    ],
+    "figmaLink": "https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system?node-id=5707-16294&m=dev",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "guidelines",
+        "title": "Guidelines",
+        "order": 2
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      },
+      {
+        "key": "a11y",
+        "title": "Accessibility",
+        "order": 4
+      }
+    ]
+  },
+  "mdx": "\n## Overview\n\nA toggle button is used similarly to a checkbox or a radio button, but supports\na smaller interactive component that can be used to give a binary active state\nchoice to users that can be used alone or in combination with other choices. A\ntoggle button or toggle icon button gives a user a new way of visualizing the\ninformation in the interface. It does not typically perform an action. Please\nuse a button or an icon button for these uses.\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[Figma library](https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system?node-id=5707-16294&m=dev)\n\n## Variables\n\nGet familiar with the features.\n\n### Visuals\n\n#### Outlined\n\nMost common styling of the toggle button.\n\n```jsx live\nconst App = () => (\n  <ToggleButton variant=\"outline\">\n    <Icons.PushPin />\n    Product categories\n  </ToggleButton>\n)\n```\n\n#### Ghost\n\nGhost styled buttons are helpful for UI simplification.\n\n```jsx live\nconst App = () => (\n  <ToggleButton variant=\"ghost\">\n    <Icons.PushPin />\n    Product categories\n  </ToggleButton>\n)\n```\n\n### Color palette\n\n#### Primary (default)\n\nThe default colorPalette for most toggle buttons.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"400\" align=\"center\" direction=\"row\">\n    <ToggleButton>\n      Primary\n    </ToggleButton>\n    <ToggleButton isSelected>\n      Selected\n    </ToggleButton>\n  </Stack>\n);\n```\n\n#### Neutral\n\nUse for secondary or less prominent toggles.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"400\" align=\"center\" direction=\"row\">\n    <ToggleButton colorPalette=\"neutral\">\n      Neutral\n    </ToggleButton>\n    <ToggleButton colorPalette=\"neutral\" isSelected>\n      Selected\n    </ToggleButton>\n  </Stack>\n);\n```\n\n#### Critical\n\nUse for toggles that represent destructive or warning states.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"400\" align=\"center\" direction=\"row\">\n    <ToggleButton colorPalette=\"critical\">\n      Critical\n    </ToggleButton>\n    <ToggleButton colorPalette=\"critical\" isSelected>\n      Selected\n    </ToggleButton>\n  </Stack>\n);\n```\n\n#### Info\n\nUse for informational or help-related toggles.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"400\" align=\"center\" direction=\"row\">\n    <ToggleButton colorPalette=\"info\">\n      Info\n    </ToggleButton>\n    <ToggleButton colorPalette=\"info\" isSelected>\n      Selected\n    </ToggleButton>\n  </Stack>\n);\n```\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Overview\n\nA toggle button is used similarly to a checkbox or a radio button, but supports\na smaller interactive component that can be used to give a binary active state\nchoice to users that can be used alone or in combination with other choices. A\ntoggle button or toggle icon button gives a user a new way of visualizing the\ninformation in the interface. It does not typically perform an action. Please\nuse a button or an icon button for these uses.\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[Figma library](https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system?node-id=5707-16294&m=dev)\n\n## Variables\n\nGet familiar with the features.\n\n### Visuals\n\n#### Outlined\n\nMost common styling of the toggle button.\n\n```jsx live\nconst App = () => (\n  <ToggleButton variant=\"outline\">\n    <Icons.PushPin />\n    Product categories\n  </ToggleButton>\n)\n```\n\n#### Ghost\n\nGhost styled buttons are helpful for UI simplification.\n\n```jsx live\nconst App = () => (\n  <ToggleButton variant=\"ghost\">\n    <Icons.PushPin />\n    Product categories\n  </ToggleButton>\n)\n```\n\n### Color palette\n\n#### Primary (default)\n\nThe default colorPalette for most toggle buttons.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"400\" align=\"center\" direction=\"row\">\n    <ToggleButton>\n      Primary\n    </ToggleButton>\n    <ToggleButton isSelected>\n      Selected\n    </ToggleButton>\n  </Stack>\n);\n```\n\n#### Neutral\n\nUse for secondary or less prominent toggles.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"400\" align=\"center\" direction=\"row\">\n    <ToggleButton colorPalette=\"neutral\">\n      Neutral\n    </ToggleButton>\n    <ToggleButton colorPalette=\"neutral\" isSelected>\n      Selected\n    </ToggleButton>\n  </Stack>\n);\n```\n\n#### Critical\n\nUse for toggles that represent destructive or warning states.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"400\" align=\"center\" direction=\"row\">\n    <ToggleButton colorPalette=\"critical\">\n      Critical\n    </ToggleButton>\n    <ToggleButton colorPalette=\"critical\" isSelected>\n      Selected\n    </ToggleButton>\n  </Stack>\n);\n```\n\n#### Info\n\nUse for informational or help-related toggles.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"400\" align=\"center\" direction=\"row\">\n    <ToggleButton colorPalette=\"info\">\n      Info\n    </ToggleButton>\n    <ToggleButton colorPalette=\"info\" isSelected>\n      Selected\n    </ToggleButton>\n  </Stack>\n);\n```\n",
+      "toc": [
+        {
+          "value": "Overview",
+          "href": "#overview",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Variables",
+          "href": "#variables",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Visuals",
+          "href": "#visuals",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Outlined",
+          "href": "#outlined",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Ghost",
+          "href": "#ghost",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Color palette",
+          "href": "#color-palette",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Primary (default)",
+          "href": "#primary-default",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Neutral",
+          "href": "#neutral",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Critical",
+          "href": "#critical",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Info",
+          "href": "#info",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            2,
+            4
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "a11y": {
+      "mdx": "\n## Accessibility\n\nAccessibility ensures that digital content and functionality are usable by\neveryone, including people with disabilities, by addressing visual, auditory,\ncognitive, and physical limitations.\n\n```jsx live\nconst App = () => (\n  <ToggleButton>\n    <Icons.PushPin />\n    Product categories\n  </ToggleButton>\n)\n```\n\n### Accessibility standards\n\n- **Use aria-pressed:** The most crucial accessibility attribute for a toggle\n  button is `aria-pressed`. When the button is \"on,\" set `aria-pressed=\"true\"`.\n  When it's \"off,\" set `aria-pressed=\"false\"`. This tells screen readers that\n  the button's function is to toggle.\n- **Provide a clear aria-label:** Since the button lacks visible text, provide a\n  descriptive `aria-label` (e.g., `aria-label=\"Toggle Bold\"` or\n  `aria-label=\"Show Advanced Settings\"`). This is what a screen reader will\n  announce to the user.\n- **Ensure keyboard operability:** Users must be able to navigate to the button\n  using the Tab key and toggle its state using the Enter or Spacebar keys.\n",
+      "toc": [
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility standards",
+          "href": "#accessibility-standards",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "dev": {
+      "mdx": "\n## Getting started\n\n### Import\n\n```tsx\nimport { ToggleButton, type ToggleButtonProps } from '@commercetools/nimbus';\n```\n\n### Basic usage\n\nThe simplest implementation uses the uncontrolled mode with `defaultSelected`:\n\n```jsx live-dev\nconst App = () => (\n  <ToggleButton\n    defaultSelected={false}\n    onChange={(isSelected) => alert(`Selected: ${isSelected}`)}\n  >\n    Toggle Me\n  </ToggleButton>\n)\n```\n\nThe component starts in the unselected state and manages its own state internally. The `onChange` callback is called whenever the selection state changes.\n\n## Usage examples\n\n### Controlled mode\n\nControl the toggle state externally using `isSelected` and `onChange`:\n\n```jsx live-dev\nconst App = () => {\n  const [isSelected, setIsSelected] = useState<ToggleButtonProps[\"isSelected\"]>(false);\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <ToggleButton isSelected={isSelected} onChange={setIsSelected}>\n        {isSelected ? \"Selected\" : \"Not Selected\"}\n      </ToggleButton>\n      <Text fontSize=\"sm\">\n        Current state: {isSelected ? \"Selected\" : \"Not Selected\"}\n      </Text>\n    </Stack>\n  );\n}\n```\n\n### With icons\n\nAdd icons to provide visual context for the toggle action:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\" wrap=\"wrap\">\n    <ToggleButton onChange={(selected) => alert(`Liked: ${selected}`)}>\n      <Icons.ThumbUp />\n      Like\n    </ToggleButton>\n\n    <ToggleButton onChange={(selected) => alert(`Favorited: ${selected}`)}>\n      <Icons.Star />\n      Favorite\n    </ToggleButton>\n\n    <ToggleButton onChange={(selected) => alert(`Saved: ${selected}`)}>\n      <Icons.Bookmark />\n      Save\n    </ToggleButton>\n\n    <ToggleButton onChange={(selected) => alert(`Notified: ${selected}`)}>\n      <Icons.Notifications />\n      Notify\n    </ToggleButton>\n  </Stack>\n)\n```\n\n### Size variants\n\nThe component supports three size variants to match your interface density:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\" alignItems=\"center\" wrap=\"wrap\">\n    <ToggleButton size=\"2xs\">\n      2x Small\n    </ToggleButton>\n\n    <ToggleButton size=\"xs\">\n      Extra Small\n    </ToggleButton>\n\n    <ToggleButton size=\"md\">\n      Medium (default)\n    </ToggleButton>\n  </Stack>\n)\n```\n\n### Visual variants\n\nChoose between visual variants to match your design context:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Stack direction=\"row\" gap=\"400\" wrap=\"wrap\">\n      <ToggleButton variant=\"outline\">\n        Outline (default)\n      </ToggleButton>\n\n      <ToggleButton variant=\"outline\" isSelected>\n        Outline Selected\n      </ToggleButton>\n    </Stack>\n\n    <Stack direction=\"row\" gap=\"400\" wrap=\"wrap\">\n      <ToggleButton variant=\"ghost\">\n        Ghost\n      </ToggleButton>\n\n      <ToggleButton variant=\"ghost\" isSelected>\n        Ghost Selected\n      </ToggleButton>\n    </Stack>\n  </Stack>\n)\n```\n\n### Color palettes\n\nUse different color palettes to indicate different types of actions:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Stack direction=\"row\" gap=\"400\" wrap=\"wrap\">\n      <ToggleButton colorPalette=\"primary\">\n        Primary\n      </ToggleButton>\n      <ToggleButton colorPalette=\"primary\" isSelected>\n        Primary Selected\n      </ToggleButton>\n    </Stack>\n\n    <Stack direction=\"row\" gap=\"400\" wrap=\"wrap\">\n      <ToggleButton colorPalette=\"neutral\">\n        Neutral\n      </ToggleButton>\n      <ToggleButton colorPalette=\"neutral\" isSelected>\n        Neutral Selected\n      </ToggleButton>\n    </Stack>\n\n    <Stack direction=\"row\" gap=\"400\" wrap=\"wrap\">\n      <ToggleButton colorPalette=\"critical\">\n        Critical\n      </ToggleButton>\n      <ToggleButton colorPalette=\"critical\" isSelected>\n        Critical Selected\n      </ToggleButton>\n    </Stack>\n\n    <Stack direction=\"row\" gap=\"400\" wrap=\"wrap\">\n      <ToggleButton colorPalette=\"info\">\n        Info\n      </ToggleButton>\n      <ToggleButton colorPalette=\"info\" isSelected>\n        Info Selected\n      </ToggleButton>\n    </Stack>\n  </Stack>\n)\n```\n\n### Disabled state\n\nDisable the toggle button to prevent user interaction:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\" wrap=\"wrap\">\n    <ToggleButton isDisabled>\n      Disabled Unselected\n    </ToggleButton>\n\n    <ToggleButton isDisabled isSelected>\n      Disabled Selected\n    </ToggleButton>\n\n    <ToggleButton isDisabled variant=\"ghost\">\n      <Icons.Star />\n      Disabled Ghost\n    </ToggleButton>\n  </Stack>\n)\n```\n\n## Component requirements\n\n## Accessibility\n\nThe ToggleButton component is built on React Aria's ToggleButton, which provides robust accessibility features out of the box.\n\n**Role**: The component uses the `button` role with `aria-pressed` attribute to communicate toggle state.\n\n**Labeling**: The button's label is determined by its children content. For icon-only buttons, provide an `aria-label`:\n\n```tsx\n<ToggleButton aria-label=\"Add to favorites\">\n  <Icons.Star />\n</ToggleButton>\n```\n\nIf your use case requires tracking and analytics for this component, it is good practice to add a **persistent**, **unique** id to the component:\n\n```tsx\nconst PERSISTENT_ID = \"like-button-toggle\";\n\nexport const LikeButton = () => (\n  <ToggleButton\n    id={PERSISTENT_ID}\n    aria-label=\"Like this post\"\n    onChange={handleLikeToggle}\n  >\n    <Icons.ThumbUp />\n  </ToggleButton>\n);\n```\n\n#### Keyboard navigation\n\nThe component supports full keyboard interaction:\n- `Tab`: Move focus to/from the toggle button\n- `Enter` or `Space`: Toggle the selected state\n\n## API reference\n\n<PropsTable id=\"ToggleButton\" />\n\n## Common patterns\n\n### Like/Favorite functionality\n\nCommon pattern for like or favorite actions with visual feedback:\n\n```jsx live-dev\nconst App = () => {\n  const [liked, setLiked] = useState(false);\n  const [favorited, setFavorited] = useState(false);\n  const [saved, setSaved] = useState(false);\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <Stack direction=\"row\" gap=\"400\" alignItems=\"center\">\n        <ToggleButton\n          isSelected={liked}\n          onChange={setLiked}\n          colorPalette=\"critical\"\n          aria-label=\"Like post\"\n        >\n          <Icons.ThumbUp />\n          {liked ? \"Liked\" : \"Like\"}\n        </ToggleButton>\n        {liked && (\n          <Text fontSize=\"sm\" color=\"critical.11\">\n            Thank you for your feedback!\n          </Text>\n        )}\n      </Stack>\n\n      <Stack direction=\"row\" gap=\"400\" alignItems=\"center\">\n        <ToggleButton\n          isSelected={favorited}\n          onChange={setFavorited}\n          colorPalette=\"info\"\n          aria-label=\"Add to favorites\"\n        >\n          <Icons.Star />\n          {favorited ? \"Favorited\" : \"Favorite\"}\n        </ToggleButton>\n        {favorited && (\n          <Text fontSize=\"sm\" color=\"info.11\">\n            Added to your favorites\n          </Text>\n        )}\n      </Stack>\n\n      <Stack direction=\"row\" gap=\"400\" alignItems=\"center\">\n        <ToggleButton\n          isSelected={saved}\n          onChange={setSaved}\n          aria-label=\"Save for later\"\n        >\n          <Icons.Bookmark />\n          {saved ? \"Saved\" : \"Save\"}\n        </ToggleButton>\n        {saved && (\n          <Text fontSize=\"sm\" color=\"neutral.11\">\n            Saved for later\n          </Text>\n        )}\n      </Stack>\n    </Stack>\n  );\n}\n```\n\n### Filter toggles\n\nUse toggle buttons as filter controls in a toolbar or filter panel:\n\n```jsx live-dev\nconst App = () => {\n  const [showActive, setShowActive] = useState(true);\n  const [showInactive, setShowInactive] = useState(false);\n  const [showArchived, setShowArchived] = useState(false);\n\n  const getStatusText = () => {\n    const statuses = [];\n    if (showActive) statuses.push(\"Active\");\n    if (showInactive) statuses.push(\"Inactive\");\n    if (showArchived) statuses.push(\"Archived\");\n    return statuses.length > 0 ? statuses.join(\", \") : \"None\";\n  };\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <Text fontWeight=\"semibold\">Filter by status:</Text>\n      <Stack direction=\"row\" gap=\"300\" wrap=\"wrap\">\n        <ToggleButton\n          size=\"xs\"\n          variant=\"outline\"\n          isSelected={showActive}\n          onChange={setShowActive}\n          colorPalette=\"primary\"\n        >\n          Active\n        </ToggleButton>\n\n        <ToggleButton\n          size=\"xs\"\n          variant=\"outline\"\n          isSelected={showInactive}\n          onChange={setShowInactive}\n          colorPalette=\"primary\"\n        >\n          Inactive\n        </ToggleButton>\n\n        <ToggleButton\n          size=\"xs\"\n          variant=\"outline\"\n          isSelected={showArchived}\n          onChange={setShowArchived}\n          colorPalette=\"primary\"\n        >\n          Archived\n        </ToggleButton>\n      </Stack>\n      <Text fontSize=\"sm\" color=\"neutral.11\">\n        Showing: {getStatusText()}\n      </Text>\n    </Stack>\n  );\n}\n```\n\n### Settings toggles\n\nPattern for settings or preferences with immediate visual feedback:\n\n```jsx live-dev\nconst App = () => {\n  const [emailNotifications, setEmailNotifications] = useState(true);\n  const [pushNotifications, setPushNotifications] = useState(false);\n  const [weeklyDigest, setWeeklyDigest] = useState(true);\n\n  return (\n    <Stack direction=\"column\" gap=\"400\">\n      <Text fontWeight=\"semibold\">Notification Preferences</Text>\n\n      <Stack direction=\"row\" gap=\"300\" alignItems=\"center\">\n        <ToggleButton\n          variant=\"ghost\"\n          size=\"xs\"\n          isSelected={emailNotifications}\n          onChange={setEmailNotifications}\n          aria-label=\"Toggle email notifications\"\n        >\n          <Icons.Email />\n        </ToggleButton>\n        <Stack direction=\"column\" gap=\"100\">\n          <Text fontSize=\"sm\" fontWeight=\"medium\">\n            Email Notifications\n          </Text>\n          <Text fontSize=\"xs\" color=\"neutral.11\">\n            {emailNotifications ? \"Enabled\" : \"Disabled\"}\n          </Text>\n        </Stack>\n      </Stack>\n\n      <Stack direction=\"row\" gap=\"300\" alignItems=\"center\">\n        <ToggleButton\n          variant=\"ghost\"\n          size=\"xs\"\n          isSelected={pushNotifications}\n          onChange={setPushNotifications}\n          aria-label=\"Toggle push notifications\"\n        >\n          <Icons.Notifications />\n        </ToggleButton>\n        <Stack direction=\"column\" gap=\"100\">\n          <Text fontSize=\"sm\" fontWeight=\"medium\">\n            Push Notifications\n          </Text>\n          <Text fontSize=\"xs\" color=\"neutral.11\">\n            {pushNotifications ? \"Enabled\" : \"Disabled\"}\n          </Text>\n        </Stack>\n      </Stack>\n\n      <Stack direction=\"row\" gap=\"300\" alignItems=\"center\">\n        <ToggleButton\n          variant=\"ghost\"\n          size=\"xs\"\n          isSelected={weeklyDigest}\n          onChange={setWeeklyDigest}\n          aria-label=\"Toggle weekly digest\"\n        >\n          <Icons.CalendarToday />\n        </ToggleButton>\n        <Stack direction=\"column\" gap=\"100\">\n          <Text fontSize=\"sm\" fontWeight=\"medium\">\n            Weekly Digest\n          </Text>\n          <Text fontSize=\"xs\" color=\"neutral.11\">\n            {weeklyDigest ? \"Enabled\" : \"Disabled\"}\n          </Text>\n        </Stack>\n      </Stack>\n    </Stack>\n  );\n}\n```\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using ToggleButton within your application. As the component's internal functionality is already tested by Nimbus, these patterns help you verify your integration and application-specific logic.\n\n### Basic rendering tests\n\nVerify the component renders with expected elements and states\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { ToggleButton, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"ToggleButton - Basic rendering\", () => {\n  it(\"renders toggle button with text content\", () => {\n    render(\n      <NimbusProvider>\n        <ToggleButton>Toggle Me</ToggleButton>\n      </NimbusProvider>\n    );\n\n    const button = screen.getByRole(\"button\", { name: /toggle me/i });\n    expect(button).toBeInTheDocument();\n  });\n\n  it(\"renders in unselected state by default\", () => {\n    render(\n      <NimbusProvider>\n        <ToggleButton>Toggle</ToggleButton>\n      </NimbusProvider>\n    );\n\n    const button = screen.getByRole(\"button\");\n    expect(button).toHaveAttribute(\"aria-pressed\", \"false\");\n  });\n\n  it(\"renders with icon and text\", () => {\n    render(\n      <NimbusProvider>\n        <ToggleButton>\n          <svg data-testid=\"test-icon\" />\n          Like\n        </ToggleButton>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByTestId(\"test-icon\")).toBeInTheDocument();\n    expect(screen.getByRole(\"button\", { name: /like/i })).toBeInTheDocument();\n  });\n\n  it(\"renders with different sizes\", () => {\n    const { rerender } = render(\n      <NimbusProvider>\n        <ToggleButton size=\"2xs\">Extra Small</ToggleButton>\n      </NimbusProvider>\n    );\n\n    let button = screen.getByRole(\"button\");\n    expect(button).toBeInTheDocument();\n\n    rerender(\n      <NimbusProvider>\n        <ToggleButton size=\"xs\">Small</ToggleButton>\n      </NimbusProvider>\n    );\n\n    button = screen.getByRole(\"button\");\n    expect(button).toBeInTheDocument();\n\n    rerender(\n      <NimbusProvider>\n        <ToggleButton size=\"md\">Medium</ToggleButton>\n      </NimbusProvider>\n    );\n\n    button = screen.getByRole(\"button\");\n    expect(button).toBeInTheDocument();\n  });\n});\n```\n\n### Interaction Tests\n\nTest user interactions with the toggle button\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { ToggleButton, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"ToggleButton - Interactions\", () => {\n  it(\"toggles state when clicked\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n\n    render(\n      <NimbusProvider>\n        <ToggleButton onChange={handleChange}>Toggle</ToggleButton>\n      </NimbusProvider>\n    );\n\n    const button = screen.getByRole(\"button\");\n\n    // Click to select\n    await user.click(button);\n    expect(handleChange).toHaveBeenCalledWith(true);\n    expect(button).toHaveAttribute(\"aria-pressed\", \"true\");\n\n    // Click to unselect\n    await user.click(button);\n    expect(handleChange).toHaveBeenCalledWith(false);\n    expect(button).toHaveAttribute(\"aria-pressed\", \"false\");\n  });\n\n  it(\"toggles with keyboard (Enter)\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n\n    render(\n      <NimbusProvider>\n        <ToggleButton onChange={handleChange}>Toggle</ToggleButton>\n      </NimbusProvider>\n    );\n\n    // Use userEvent.tab() instead of element.focus() to avoid act() warnings\n    await user.tab();\n    await user.keyboard(\"{Enter}\");\n    expect(handleChange).toHaveBeenCalledWith(true);\n  });\n\n  it(\"toggles with keyboard (Space)\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n\n    render(\n      <NimbusProvider>\n        <ToggleButton onChange={handleChange}>Toggle</ToggleButton>\n      </NimbusProvider>\n    );\n\n    // Use userEvent.tab() instead of element.focus() to avoid act() warnings\n    await user.tab();\n    await user.keyboard(\" \");\n    expect(handleChange).toHaveBeenCalledWith(true);\n  });\n\n  it(\"is focusable with Tab key\", async () => {\n    const user = userEvent.setup();\n\n    render(\n      <NimbusProvider>\n        <ToggleButton>Toggle</ToggleButton>\n      </NimbusProvider>\n    );\n\n    const button = screen.getByRole(\"button\");\n    expect(button).not.toHaveFocus();\n\n    await user.tab();\n    expect(button).toHaveFocus();\n  });\n});\n```\n\n### Controlled Mode Tests\n\nTest controlled toggle button behavior\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { ToggleButton, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"ToggleButton - Controlled mode\", () => {\n  it(\"respects controlled isSelected prop\", () => {\n    const { rerender } = render(\n      <NimbusProvider>\n        <ToggleButton isSelected={false} onChange={vi.fn()}>\n          Toggle\n        </ToggleButton>\n      </NimbusProvider>\n    );\n\n    let button = screen.getByRole(\"button\");\n    expect(button).toHaveAttribute(\"aria-pressed\", \"false\");\n\n    rerender(\n      <NimbusProvider>\n        <ToggleButton isSelected={true} onChange={vi.fn()}>\n          Toggle\n        </ToggleButton>\n      </NimbusProvider>\n    );\n\n    button = screen.getByRole(\"button\");\n    expect(button).toHaveAttribute(\"aria-pressed\", \"true\");\n  });\n\n  it(\"calls onChange when clicked in controlled mode\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n\n    render(\n      <NimbusProvider>\n        <ToggleButton isSelected={false} onChange={handleChange}>\n          Toggle\n        </ToggleButton>\n      </NimbusProvider>\n    );\n\n    const button = screen.getByRole(\"button\");\n    await user.click(button);\n\n    expect(handleChange).toHaveBeenCalledWith(true);\n  });\n});\n```\n\n### Uncontrolled Mode Tests\n\nTest uncontrolled toggle button behavior\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { ToggleButton, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"ToggleButton - Uncontrolled mode\", () => {\n  it(\"starts with defaultSelected value\", () => {\n    render(\n      <NimbusProvider>\n        <ToggleButton defaultSelected={true}>Toggle</ToggleButton>\n      </NimbusProvider>\n    );\n\n    const button = screen.getByRole(\"button\");\n    expect(button).toHaveAttribute(\"aria-pressed\", \"true\");\n  });\n\n  it(\"manages internal state when uncontrolled\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n\n    render(\n      <NimbusProvider>\n        <ToggleButton defaultSelected={false} onChange={handleChange}>\n          Toggle\n        </ToggleButton>\n      </NimbusProvider>\n    );\n\n    const button = screen.getByRole(\"button\");\n    expect(button).toHaveAttribute(\"aria-pressed\", \"false\");\n\n    await user.click(button);\n    expect(handleChange).toHaveBeenCalledWith(true);\n    expect(button).toHaveAttribute(\"aria-pressed\", \"true\");\n\n    await user.click(button);\n    expect(handleChange).toHaveBeenCalledWith(false);\n    expect(button).toHaveAttribute(\"aria-pressed\", \"false\");\n  });\n});\n```\n\n### State Tests\n\nTest different states like disabled\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { ToggleButton, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"ToggleButton - States\", () => {\n  it(\"renders disabled state\", () => {\n    render(\n      <NimbusProvider>\n        <ToggleButton isDisabled>Disabled</ToggleButton>\n      </NimbusProvider>\n    );\n\n    const button = screen.getByRole(\"button\");\n    expect(button).toBeDisabled();\n  });\n\n  it(\"does not respond to clicks when disabled\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n\n    render(\n      <NimbusProvider>\n        <ToggleButton isDisabled onChange={handleChange}>\n          Disabled\n        </ToggleButton>\n      </NimbusProvider>\n    );\n\n    const button = screen.getByRole(\"button\");\n    await user.click(button);\n\n    expect(handleChange).not.toHaveBeenCalled();\n  });\n\n  it(\"cannot receive focus when disabled\", async () => {\n    const user = userEvent.setup();\n\n    render(\n      <NimbusProvider>\n        <ToggleButton isDisabled>Disabled</ToggleButton>\n      </NimbusProvider>\n    );\n\n    const button = screen.getByRole(\"button\");\n    await user.tab();\n\n    expect(button).not.toHaveFocus();\n  });\n\n  it(\"renders selected state\", () => {\n    render(\n      <NimbusProvider>\n        <ToggleButton isSelected>Selected</ToggleButton>\n      </NimbusProvider>\n    );\n\n    const button = screen.getByRole(\"button\");\n    expect(button).toHaveAttribute(\"aria-pressed\", \"true\");\n  });\n});\n```\n\n### Visual Variant Tests\n\nTest different visual variants and color palettes\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { ToggleButton, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"ToggleButton - Variants\", () => {\n  it(\"renders outline variant\", () => {\n    render(\n      <NimbusProvider>\n        <ToggleButton variant=\"outline\">Outline</ToggleButton>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByRole(\"button\")).toBeInTheDocument();\n  });\n\n  it(\"renders ghost variant\", () => {\n    render(\n      <NimbusProvider>\n        <ToggleButton variant=\"ghost\">Ghost</ToggleButton>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByRole(\"button\")).toBeInTheDocument();\n  });\n\n  it(\"renders with different color palettes\", () => {\n    const { rerender } = render(\n      <NimbusProvider>\n        <ToggleButton colorPalette=\"primary\">Primary</ToggleButton>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByRole(\"button\")).toBeInTheDocument();\n\n    rerender(\n      <NimbusProvider>\n        <ToggleButton colorPalette=\"neutral\">Neutral</ToggleButton>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByRole(\"button\")).toBeInTheDocument();\n\n    rerender(\n      <NimbusProvider>\n        <ToggleButton colorPalette=\"critical\">Critical</ToggleButton>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByRole(\"button\")).toBeInTheDocument();\n\n    rerender(\n      <NimbusProvider>\n        <ToggleButton colorPalette=\"info\">Info</ToggleButton>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByRole(\"button\")).toBeInTheDocument();\n  });\n});\n```\n\n### Accessibility Tests\n\nTest ARIA attributes and keyboard accessibility\n\n```tsx\nimport { describe, it, expect, vi } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { ToggleButton, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"ToggleButton - Accessibility\", () => {\n  it(\"has proper button role\", () => {\n    render(\n      <NimbusProvider>\n        <ToggleButton>Toggle</ToggleButton>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByRole(\"button\")).toBeInTheDocument();\n  });\n\n  it(\"has aria-pressed attribute\", () => {\n    render(\n      <NimbusProvider>\n        <ToggleButton isSelected={false}>Toggle</ToggleButton>\n      </NimbusProvider>\n    );\n\n    const button = screen.getByRole(\"button\");\n    expect(button).toHaveAttribute(\"aria-pressed\", \"false\");\n  });\n\n  it(\"updates aria-pressed when toggled\", async () => {\n    const user = userEvent.setup();\n\n    render(\n      <NimbusProvider>\n        <ToggleButton defaultSelected={false}>Toggle</ToggleButton>\n      </NimbusProvider>\n    );\n\n    const button = screen.getByRole(\"button\");\n    expect(button).toHaveAttribute(\"aria-pressed\", \"false\");\n\n    await user.click(button);\n    expect(button).toHaveAttribute(\"aria-pressed\", \"true\");\n  });\n\n  it(\"supports aria-label for icon-only buttons\", () => {\n    render(\n      <NimbusProvider>\n        <ToggleButton aria-label=\"Add to favorites\">\n          <svg data-testid=\"icon\" />\n        </ToggleButton>\n      </NimbusProvider>\n    );\n\n    expect(\n      screen.getByRole(\"button\", { name: /add to favorites/i })\n    ).toBeInTheDocument();\n  });\n\n  it(\"is keyboard accessible\", async () => {\n    const user = userEvent.setup();\n    const handleChange = vi.fn();\n\n    render(\n      <NimbusProvider>\n        <ToggleButton onChange={handleChange}>Toggle</ToggleButton>\n      </NimbusProvider>\n    );\n\n    const button = screen.getByRole(\"button\");\n\n    // Focus with Tab\n    await user.tab();\n    expect(button).toHaveFocus();\n\n    // Activate with Enter\n    await user.keyboard(\"{Enter}\");\n    expect(handleChange).toHaveBeenCalledWith(true);\n  });\n});\n```\n\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-buttons-togglebutton--docs)\n- [React Aria ToggleButton](https://react-spectrum.adobe.com/react-aria/ToggleButton.html)\n- [ARIA Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/)\n- [Button Component](/components/buttons/button)\n",
+      "toc": [
+        {
+          "value": "Getting started",
+          "href": "#getting-started",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Import",
+          "href": "#import",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage examples",
+          "href": "#usage-examples",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Controlled mode",
+          "href": "#controlled-mode",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With icons",
+          "href": "#with-icons",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size variants",
+          "href": "#size-variants",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Visual variants",
+          "href": "#visual-variants",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Color palettes",
+          "href": "#color-palettes",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Disabled state",
+          "href": "#disabled-state",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Component requirements",
+          "href": "#component-requirements",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Keyboard navigation",
+          "href": "#keyboard-navigation",
+          "depth": 4,
+          "numbering": [
+            1,
+            4,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Common patterns",
+          "href": "#common-patterns",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Like/Favorite functionality",
+          "href": "#likefavorite-functionality",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Filter toggles",
+          "href": "#filter-toggles",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Settings toggles",
+          "href": "#settings-toggles",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing your implementation",
+          "href": "#testing-your-implementation",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic rendering tests",
+          "href": "#basic-rendering-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Interaction Tests",
+          "href": "#interaction-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Controlled Mode Tests",
+          "href": "#controlled-mode-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Uncontrolled Mode Tests",
+          "href": "#uncontrolled-mode-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "State Tests",
+          "href": "#state-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Visual Variant Tests",
+          "href": "#visual-variant-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility Tests",
+          "href": "#accessibility-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            8
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "guidelines": {
+      "mdx": "\n## Guidelines\n\nToggle button guidelines aim to provide clear and consistent visual feedback to\nusers for compact binary states.\n\n### Best practices\n\n- **Provide clear labeling:** Always pair the toggle with a visible, persistent\n  text label that describes the setting it controls.\n- **Prioritize accessibility:** Use the appropriate aria-checked or aria-pressed\n  attributes to convey the state to screen readers and ensure the component is\n  fully keyboard navigable.\n- **Ensure binary clarity:** Use single toggle buttons only for simple,\n  two-state choices where the action is immediate and has a clear \"on\" or \"off\"\n  status (e.g., Mute, Enable Dark Mode).\n\n##### Toggle Groups (Segmented Controls)\n\n- **Enforce mutual exclusivity:** Use toggle groups (segmented controls) when\n  the user must select one option from a small, defined set (acting like radio\n  buttons), such as viewing modes or alignment controls.\n- **Ensure complementary actions:** Group only those actions or options that are\n  closely related within the same context (e.g., filtering by \"All,\" \"Active,\"\n  \"Completed\").\n- **Maintain consistent sizing:** All buttons within the group should be\n  uniformly sized to create a cohesive, single-component look, even if the text\n  labels vary slightly in length.\n- **Limit options:** Keep the number of options within the group small (ideally\n  3 to 5) to prevent overcrowding and confusion.\n\n### Usage\n\n> [!TIP]\\\n> When to use\n\n- **Binary settings:** When the control represents a simple, immediate choice\n  between two mutually exclusive states (e.g., \"On/Off,\" \"Active/Inactive,\"\n  \"Yes/No\").\n- **Instant application:** When the action takes effect immediately without\n  requiring the user to press a separate \"Save\" or \"Submit\" button.\n- **Configuration preferences:** For managing application settings or feature\n  preferences (e.g., \"Enable Notifications,\" \"Use Dark Mode\").\n- **Visual status indicator:** When the current state of a persistent setting\n  needs to be clearly visible at a glance.\n\n> [!CAUTION]\\\n> When not to use\n\n- **Ambiguous actions:** Do not use them when the icon's meaning is unclear or\n  requires the user to guess; use a text label.\n- **Complex or multi-state processes:** Avoid using them for actions that\n  require more than two states or sequential steps; use a segmented button or\n  switch.\n- **Critical, permanent actions:** Do not use them for destructive or major\n  actions; use a full text button with confirmation.\n- **Core navigation:** Avoid making primary navigation items toggleable unless\n  they explicitly switch between two main views.\n- **Multi-select options:** If the user can select multiple items from a list,\n  use checkboxes instead.\n- **Multi-state options:** If the user needs to select one option from three or\n  more choices, use radio buttons or a segmented control instead.\n- **Actions requiring confirmation:** Do not use for actions that are\n  destructive, irreversible, or require confirmation (e.g., deleting an account,\n  submitting a payment). Use a standard button that triggers a confirmation\n  dialog.\n- **Complex settings:** Avoid using a toggle if the result of the action isn't\n  clear or if the setting requires additional input fields to be configured.\n- **Triggers for new pages:** Do not use a toggle to navigate to a new section\n  or page; use a link or standard button for navigation.\n- **Long-running processes:** For actions that take time to complete (e.g.,\n  \"Start Backup\"), a standard button that displays a loading spinner upon press\n  is more appropriate.\n\n### Toggle buttons in use\n\n> [!TIP]\\\n> **Do**\n>\n> - Do use toggle buttons for a simple binary choice (on/off).\n> - Do place them in toolbars or areas where space is limited.\n> - Do ensure the \"on\" state is clearly distinct from the \"off\" state.\n> - Do connect buttons that toggle one active state among a small selection of\n>   options.\n\n```jsx live\nconst App = () => (\n  <ToggleButton>\n    <Icons.LocalShipping />\n    Default shipping address\n  </ToggleButton>\n)\n```\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Don't use for destructive or critical actions needing confirmation.\n> - Don't use for navigation.\n> - Don't rely on subtle color changes alone to show the state.\n> - Don't use for complex settings that require additional user input.\n\n```jsx live\nconst App = () => (\n  <ToggleButton>\n    <Icons.Delete />\n    Delete all of my data\n  </ToggleButton>\n)\n```\n",
+      "toc": [
+        {
+          "value": "Guidelines",
+          "href": "#guidelines",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Best practices",
+          "href": "#best-practices",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Toggle Groups (Segmented Controls)",
+          "href": "#toggle-groups-segmented-controls",
+          "depth": 5,
+          "numbering": [
+            1,
+            1,
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage",
+          "href": "#usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Toggle buttons in use",
+          "href": "#toggle-buttons-in-use",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            3
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}