@commercetools/nimbus-mcp 3.5.1 → 3.6.0

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

@@ -86,6 +86,29 @@
         ],
         "parent": "root"
       },
+      {
+        "value": "Subtle",
+        "href": "#subtle",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Active fill",
+        "href": "#active-fill",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          2
+        ],
+        "parent": "root"
+      },
       {
         "value": "Color palette",
         "href": "#color-palette",
@@ -93,7 +116,7 @@
         "numbering": [
           1,
           2,
-          2
+          3
         ],
         "parent": "root"
       },
@@ -104,7 +127,7 @@
         "numbering": [
           1,
           2,
-          2,
+          3,
           1
         ],
         "parent": "root"
@@ -116,7 +139,7 @@
         "numbering": [
           1,
           2,
-          2,
+          3,
           2
         ],
         "parent": "root"
@@ -128,7 +151,7 @@
         "numbering": [
           1,
           2,
-          2,
+          3,
           3
         ],
         "parent": "root"
@@ -140,7 +163,7 @@
         "numbering": [
           1,
           2,
-          2,
+          3,
           4
         ],
         "parent": "root"
@@ -171,10 +194,10 @@
       }
     ]
   },
-  "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",
+  "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#### Subtle\n\nA filled neutral chip at rest — useful when the control should read as an\naffordance even before it is selected.\n\n```jsx live\nconst App = () => (\n  <ToggleButton variant=\"subtle\">\n    <Icons.PushPin />\n    Product categories\n  </ToggleButton>\n)\n```\n\n### Active fill\n\nThe `activeFillStyle` prop sets the weight of the active (selected) fill,\nindependent of the resting `variant`. Use `tint` (default) for multi-select sets\nand `solid` when a single choice should stand out.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"400\" align=\"center\" direction=\"row\">\n    <ToggleButton colorPalette=\"primary\" activeFillStyle=\"tint\" isSelected>\n      Tint (default)\n    </ToggleButton>\n    <ToggleButton colorPalette=\"primary\" activeFillStyle=\"solid\" isSelected>\n      Solid\n    </ToggleButton>\n  </Stack>\n);\n```\n\n### Color palette\n\nThe resting toggle button is always neutral; `colorPalette` tints the active\n(selected) state, so each palette below is shown unselected and selected.\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",
+      "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#### Subtle\n\nA filled neutral chip at rest — useful when the control should read as an\naffordance even before it is selected.\n\n```jsx live\nconst App = () => (\n  <ToggleButton variant=\"subtle\">\n    <Icons.PushPin />\n    Product categories\n  </ToggleButton>\n)\n```\n\n### Active fill\n\nThe `activeFillStyle` prop sets the weight of the active (selected) fill,\nindependent of the resting `variant`. Use `tint` (default) for multi-select sets\nand `solid` when a single choice should stand out.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"400\" align=\"center\" direction=\"row\">\n    <ToggleButton colorPalette=\"primary\" activeFillStyle=\"tint\" isSelected>\n      Tint (default)\n    </ToggleButton>\n    <ToggleButton colorPalette=\"primary\" activeFillStyle=\"solid\" isSelected>\n      Solid\n    </ToggleButton>\n  </Stack>\n);\n```\n\n### Color palette\n\nThe resting toggle button is always neutral; `colorPalette` tints the active\n(selected) state, so each palette below is shown unselected and selected.\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",
@@ -242,6 +265,29 @@
           ],
           "parent": "root"
         },
+        {
+          "value": "Subtle",
+          "href": "#subtle",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Active fill",
+          "href": "#active-fill",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
         {
           "value": "Color palette",
           "href": "#color-palette",
@@ -249,7 +295,7 @@
           "numbering": [
             1,
             2,
-            2
+            3
           ],
           "parent": "root"
         },
@@ -260,7 +306,7 @@
           "numbering": [
             1,
             2,
-            2,
+            3,
             1
           ],
           "parent": "root"
@@ -272,7 +318,7 @@
           "numbering": [
             1,
             2,
-            2,
+            3,
             2
           ],
           "parent": "root"
@@ -284,7 +330,7 @@
           "numbering": [
             1,
             2,
-            2,
+            3,
             3
           ],
           "parent": "root"
@@ -296,7 +342,7 @@
           "numbering": [
             1,
             2,
-            2,
+            3,
             4
           ],
           "parent": "root"
@@ -330,7 +376,7 @@
       ]
     },
     "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",
+      "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 five size variants (`2xs`, `xs`, `sm`, `md`, `xl`) to\nmatch your interface density — the same scale as `Button`:\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=\"sm\">\n      Small\n    </ToggleButton>\n\n    <ToggleButton size=\"md\">\n      Medium (default)\n    </ToggleButton>\n\n    <ToggleButton size=\"xl\">\n      Extra Large\n    </ToggleButton>\n  </Stack>\n)\n```\n\n### Visual variants\n\nThe `variant` prop controls the resting chrome. In every variant the resting\nbutton is neutral — `colorPalette` is reserved for the active (selected) state\n(see \"Color palettes\" below). Choose the variant that matches your surface:\n\n- `outline` (default): a neutral border over a transparent fill.\n- `ghost`: no border and no fill until hover — good for dense toolbars.\n- `subtle`: a filled neutral chip at rest.\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\n    <Stack direction=\"row\" gap=\"400\" wrap=\"wrap\">\n      <ToggleButton variant=\"subtle\">\n        Subtle\n      </ToggleButton>\n\n      <ToggleButton variant=\"subtle\" isSelected>\n        Subtle Selected\n      </ToggleButton>\n    </Stack>\n  </Stack>\n)\n```\n\n### Active fill style\n\n`activeFillStyle` controls the weight of the active (selected) fill. It is\nindependent of `variant`, which only styles the resting state.\n\n- `tint` (default): a light accent wash — `colorPalette.5` fill with\n  `colorPalette.12` text.\n- `solid`: a full accent fill — `colorPalette.9` fill with contrast text.\n\nUse `tint` for multi-select sets where several buttons can be on at once, and\n`solid` when a single choice should stand out.\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"column\" gap=\"400\">\n    <Stack direction=\"row\" gap=\"400\" wrap=\"wrap\">\n      <ToggleButton activeFillStyle=\"tint\" isSelected>\n        Tint (default)\n      </ToggleButton>\n\n      <ToggleButton activeFillStyle=\"solid\" isSelected>\n        Solid\n      </ToggleButton>\n    </Stack>\n\n    <Stack direction=\"row\" gap=\"400\" wrap=\"wrap\">\n      <ToggleButton colorPalette=\"primary\" activeFillStyle=\"tint\" isSelected>\n        Primary tint\n      </ToggleButton>\n\n      <ToggleButton colorPalette=\"primary\" activeFillStyle=\"solid\" isSelected>\n        Primary solid\n      </ToggleButton>\n    </Stack>\n  </Stack>\n)\n```\n\n### Color palettes\n\n`colorPalette` tints the **active (selected)** state — the resting button stays\nneutral, so the palette only shows once a button is selected. Use different color\npalettes 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 subtle variant\", () => {\n    render(\n      <NimbusProvider>\n        <ToggleButton variant=\"subtle\">Subtle</ToggleButton>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByRole(\"button\")).toBeInTheDocument();\n  });\n\n  it(\"renders both active fill styles when selected\", () => {\n    const { rerender } = render(\n      <NimbusProvider>\n        <ToggleButton activeFillStyle=\"tint\" isSelected>\n          Tint\n        </ToggleButton>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByRole(\"button\")).toHaveAttribute(\"aria-pressed\", \"true\");\n\n    rerender(\n      <NimbusProvider>\n        <ToggleButton activeFillStyle=\"solid\" isSelected>\n          Solid\n        </ToggleButton>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByRole(\"button\")).toHaveAttribute(\"aria-pressed\", \"true\");\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",
@@ -418,6 +464,17 @@
           ],
           "parent": "root"
         },
+        {
+          "value": "Active fill style",
+          "href": "#active-fill-style",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            5
+          ],
+          "parent": "root"
+        },
         {
           "value": "Color palettes",
           "href": "#color-palettes",
@@ -425,7 +482,7 @@
           "numbering": [
             1,
             2,
-            5
+            6
           ],
           "parent": "root"
         },
@@ -436,7 +493,7 @@
           "numbering": [
             1,
             2,
-            6
+            7
           ],
           "parent": "root"
         },

package/data/docs/routes/components-chat.json

@@ -0,0 +1,36 @@
+{
+  "meta": {
+    "id": "Components-Chat",
+    "title": "Chat",
+    "description": "Components for building AI chat conversations.",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/docs/chat.mdx",
+    "menu": [
+      "Components",
+      "Chat"
+    ],
+    "route": "components/chat",
+    "tags": [
+      "chat",
+      "ai",
+      "conversation"
+    ],
+    "toc": [],
+    "icon": "Forum",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Chat\n\nComponents for building AI chat conversations.\n\n<CategoryOverview variant=\"list\" />\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# Chat\n\nComponents for building AI chat conversations.\n\n<CategoryOverview variant=\"list\" />\n",
+      "toc": []
+    }
+  }
+}

package/data/docs/routes/components-content.json

@@ -0,0 +1,36 @@
+{
+  "meta": {
+    "id": "Components-Content",
+    "title": "Content",
+    "description": "Components for rendering and displaying rich content.",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/docs/content.mdx",
+    "menu": [
+      "Components",
+      "Content"
+    ],
+    "route": "components/content",
+    "tags": [
+      "content",
+      "markdown",
+      "rendering"
+    ],
+    "toc": [],
+    "icon": "Article",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Content\n\nComponents for rendering and displaying rich content.\n\n<CategoryOverview variant=\"list\" />\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# Content\n\nComponents for rendering and displaying rich content.\n\n<CategoryOverview variant=\"list\" />\n",
+      "toc": []
+    }
+  }
+}