@workday/canvas-kit-mcp 16.1.5 → 16.1.7

package/dist/index.js

@@ -13,7 +13,7 @@ import { z as z2 } from "zod";
 // package.json
 var package_default = {
   name: "@workday/canvas-kit-mcp",
-  version: "16.1.5",
+  version: "16.1.7",
   description: "MCP package for Canvas Kit",
   author: "Workday, Inc. (https://www.workday.com)",
   license: "Apache-2.0",
@@ -1719,8 +1719,8 @@ var stories_config_default = {
       title: "Components/Buttons/Action Bar",
       storybookUrl: "https://workday.github.io/canvas-kit/?path=/docs/components-buttons-action-bar--docs",
       mdxPath: "modules/react/action-bar/stories/ActionBar.mdx",
-      mdxProse: "# Canvas Kit Action Bar\n\nAction Bar is a [compound component](/get-started/for-developers/documentation/compound-components/)\nthat contains primary and secondary actions related to a page or task.\n\n[> Workday Design Reference](https://design.workday.com/components/buttons/action-bar)\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### Basic Example\n\n`ActionBar` includes a container `ActionBar` component and the following subcomponent:\n`ActionBar.List` which should contains `ActionBar.Item`.\n\nIn a basic example of an `ActionBar` there are two buttons. The primary action button should be used\nonly once and left aligned if content is left to right, followed by secondary buttons. Tertiary\nbuttons should not be used in the Action Bar.\n```tsx\nimport {ActionBar} from '@workday/canvas-kit-react/action-bar';\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\n\nexport const Basic = () => {\n  return (\n    <ActionBar>\n      <ActionBar.List position=\"relative\" as=\"section\" aria-label=\"Action Bar\">\n        <ActionBar.Item as={PrimaryButton} onClick={() => console.log('first action')}>\n          First Action\n        </ActionBar.Item>\n        <ActionBar.Item>Second Action</ActionBar.Item>\n      </ActionBar.List>\n    </ActionBar>\n  );\n};\n```\n\n### Icons Example\n\n`ActionBar.Item` renders a `SecondaryButton` as default, so it's possible to use other Button props\nwith `ActionBar.Item` such as `icon` or `size`.\n```tsx\nimport {ActionBar} from '@workday/canvas-kit-react/action-bar';\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {alarmClockIcon, notificationsIcon} from '@workday/canvas-system-icons-web';\n\nexport const Icons = () => {\n  return (\n    <ActionBar>\n      <ActionBar.List position=\"relative\" as=\"section\" aria-label=\"Action Bar\">\n        <ActionBar.Item as={PrimaryButton} icon={notificationsIcon}>\n          First Action\n        </ActionBar.Item>\n        <ActionBar.Item icon={alarmClockIcon}>Second Action</ActionBar.Item>\n      </ActionBar.List>\n    </ActionBar>\n  );\n};\n```\n\n### Delete Action Example\n\n`ActionBar.Item` is a `SecondaryButton` by default but it's posible to change it to another element,\nsuch as `DeleteButton`, by using `as` prop.\n```tsx\nimport {ActionBar} from '@workday/canvas-kit-react/action-bar';\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\n\nexport const DeleteAction = () => {\n  return (\n    <ActionBar>\n      <ActionBar.List position=\"relative\" as=\"section\" aria-label=\"Action Bar\">\n        <ActionBar.Item as={DeleteButton}>Delete Action</ActionBar.Item>\n        <ActionBar.Item>Second Action</ActionBar.Item>\n      </ActionBar.List>\n    </ActionBar>\n  );\n};\n```\n\n### Overflow Example\n\n`ActionBar` container can contain up to 3 actions and an Overflow Menu if there are more than 3\nactions, the other remaining actions should be placed into an Overflow Menu that is launched by\nclicking the Overflow Button.\n\nAlso, ActionBar is a responsive component based on the width of its container. If the rendered\nactions exceed the width of the `ActionBar.List`, an overflow menu will be rendered. This only works\nagainst the dynamic API where you give the `ActionBarModel` an array of items to be rendered. The\ndynamic API handles the React `key` for you based on the item's identifier. The dynamic API requires\neither an `id` on each item object or a `getId` function that returns an identifier based on the\nitem. The below example uses an `id` property on each item.\n\nThe dynamic API takes in any object, but since nothing is known about your object, a\n[render prop](https://reactjs.org/docs/render-props.html) is necessary to instruct a list how it\nshould render.\n```tsx\nimport React from 'react';\n\nimport {ActionBar, useActionBarModel} from '@workday/canvas-kit-react/action-bar';\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {breakpoints} from '@workday/canvas-kit-react/common';\nimport {Box} from '@workday/canvas-kit-react/layout';\nimport {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';\nimport {px2rem} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\ntype MyActionItem = {\n  id: string;\n  text: React.ReactNode;\n};\n\nexport const OverflowActionBar = () => {\n  const [items] = React.useState<MyActionItem[]>([\n    {id: 'first', text: 'First Action'},\n    {id: 'second', text: 'Second Action'},\n    {id: 'third', text: 'Third Action'},\n    {id: 'fourth', text: 'Fourth Action'},\n    {id: 'fifth', text: 'Fifth Action'},\n  ]);\n\n  const model = useActionBarModel({items});\n  const [containerWidth, setContainerWidth] = React.useState<string | number>('100%');\n\n  return (\n    <div>\n      <Box cs={{maxWidth: containerWidth, marginBlockEnd: system.gap.xxl}}>\n        <ActionBar model={model}>\n          <ActionBar.List\n            position=\"relative\"\n            as=\"section\"\n            aria-label=\"Action Bar\"\n            overflowButton={<ActionBar.OverflowButton aria-label=\"More actions\" />}\n          >\n            {(item: MyActionItem, index) => (\n              <ActionBar.Item\n                as={index === 0 ? PrimaryButton : undefined}\n                onClick={() => console.log(item.id)}\n              >\n                {item.text}\n              </ActionBar.Item>\n            )}\n          </ActionBar.List>\n          <ActionBar.Menu.Popper>\n            <ActionBar.Menu.Card cs={{maxWidth: px2rem(300), maxHeight: px2rem(200)}}>\n              <ActionBar.Menu.List>\n                {(item: MyActionItem) => (\n                  <ActionBar.Menu.Item onClick={() => console.log(item.id)}>\n                    {item.text}\n                  </ActionBar.Menu.Item>\n                )}\n              </ActionBar.Menu.List>\n            </ActionBar.Menu.Card>\n          </ActionBar.Menu.Popper>\n        </ActionBar>\n      </Box>\n      <footer>\n        <h4>Change Action Bar container size</h4>\n        <SegmentedControl onSelect={data => setContainerWidth(data.id)}>\n          <SegmentedControl.List role=\"group\" aria-label=\"container width control\">\n            <SegmentedControl.Item data-id=\"100%\">100%</SegmentedControl.Item>\n            <SegmentedControl.Item data-id={`${breakpoints.m}px`}>Small</SegmentedControl.Item>\n            <SegmentedControl.Item data-id=\"420px\">420px</SegmentedControl.Item>\n            <SegmentedControl.Item data-id={`${breakpoints.s}px`}>\n              Extra Small\n            </SegmentedControl.Item>\n          </SegmentedControl.List>\n        </SegmentedControl>\n        <br />\n        <p>Selected: {containerWidth}</p>\n      </footer>\n    </div>\n  );\n};\n```\n\nThe number of visible buttons can also be adjusted by using the model's `maximumVisible` attribute.\nYou can change it from the default of 3 to any number greater than 1 and less than items.length.\n```tsx\nimport React from 'react';\n\nimport {ActionBar} from '@workday/canvas-kit-react/action-bar';\n\ntype MyActionItem = {\n  id: string;\n  text: React.ReactNode;\n};\n\nexport const OverflowActionBarCustomButtonCount = () => {\n  const [items] = React.useState<MyActionItem[]>([\n    {id: 'view', text: 'View'},\n    {id: 'edit', text: 'Edit'},\n    {id: 'delete', text: 'Delete'},\n  ]);\n\n  return (\n    <ActionBar items={items} maximumVisible={2}>\n      <ActionBar.List\n        as=\"section\"\n        aria-label=\"Custom button count overflow example\"\n        position=\"relative\"\n        overflowButton={<ActionBar.OverflowButton aria-label=\"More actions\" />}\n      >\n        {(item: MyActionItem) => (\n          <ActionBar.Item onClick={() => console.log(item.id)}>{item.text}</ActionBar.Item>\n        )}\n      </ActionBar.List>\n      <ActionBar.Menu.Popper>\n        <ActionBar.Menu.Card>\n          <ActionBar.Menu.List>\n            {(item: MyActionItem) => (\n              <ActionBar.Menu.Item onClick={() => console.log(item.id)}>\n                {item.text}\n              </ActionBar.Menu.Item>\n            )}\n          </ActionBar.Menu.List>\n        </ActionBar.Menu.Card>\n      </ActionBar.Menu.Popper>\n    </ActionBar>\n  );\n};\n```\n\n## Accessibility\n\nGrouping the actions into an HTML `<section>` element with an `aria-label` string is recommended.\nThis can be useful for helping screen reader users quickly jump down to the actions at the bottom of\na page.\n\nRefer to [Button](/components/buttons/button/#accessibility) and\n[Menus](/components/popups/menu/#accessibility) for more information about accessibiliy of these\ncomponents in the Action Bar.\n\n## Component API\n\n",
-      accessibilityProse: "## Accessibility\n\nGrouping the actions into an HTML `<section>` element with an `aria-label` string is recommended.\nThis can be useful for helping screen reader users quickly jump down to the actions at the bottom of\na page.\n\nRefer to [Button](/components/buttons/button/#accessibility) and\n[Menus](/components/popups/menu/#accessibility) for more information about accessibiliy of these\ncomponents in the Action Bar."
+      mdxProse: "# Canvas Kit Action Bar\n\nAction Bar is a [compound component](/get-started/for-developers/documentation/compound-components/)\nthat contains primary and secondary actions related to a page or task.\n\n[> Workday Design Reference](https://design.workday.com/components/buttons/action-bar)\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### Basic Example\n\n`ActionBar` includes a container `ActionBar` component and the following subcomponent:\n`ActionBar.List` which should contains `ActionBar.Item`.\n\nIn a basic example of an `ActionBar` there are two buttons. The primary action button should be used\nonly once and left aligned if content is left to right, followed by secondary buttons. Tertiary\nbuttons should not be used in the Action Bar.\n```tsx\nimport {ActionBar} from '@workday/canvas-kit-react/action-bar';\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\n\nexport const Basic = () => {\n  return (\n    <ActionBar>\n      <ActionBar.List position=\"relative\" as=\"section\" aria-label=\"Action Bar\">\n        <ActionBar.Item as={PrimaryButton} onClick={() => console.log('first action')}>\n          First Action\n        </ActionBar.Item>\n        <ActionBar.Item>Second Action</ActionBar.Item>\n      </ActionBar.List>\n    </ActionBar>\n  );\n};\n```\n\n### Icons Example\n\n`ActionBar.Item` renders a `SecondaryButton` as default, so it's possible to use other Button props\nwith `ActionBar.Item` such as `icon` or `size`.\n```tsx\nimport {ActionBar} from '@workday/canvas-kit-react/action-bar';\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {alarmClockIcon, notificationsIcon} from '@workday/canvas-system-icons-web';\n\nexport const Icons = () => {\n  return (\n    <ActionBar>\n      <ActionBar.List position=\"relative\" as=\"section\" aria-label=\"Action Bar\">\n        <ActionBar.Item as={PrimaryButton} icon={notificationsIcon}>\n          First Action\n        </ActionBar.Item>\n        <ActionBar.Item icon={alarmClockIcon}>Second Action</ActionBar.Item>\n      </ActionBar.List>\n    </ActionBar>\n  );\n};\n```\n\n### Delete Action Example\n\n`ActionBar.Item` is a `SecondaryButton` by default but it's posible to change it to another element,\nsuch as `DeleteButton`, by using `as` prop.\n```tsx\nimport {ActionBar} from '@workday/canvas-kit-react/action-bar';\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\n\nexport const DeleteAction = () => {\n  return (\n    <ActionBar>\n      <ActionBar.List position=\"relative\" as=\"section\" aria-label=\"Action Bar\">\n        <ActionBar.Item as={DeleteButton}>Delete Action</ActionBar.Item>\n        <ActionBar.Item>Second Action</ActionBar.Item>\n      </ActionBar.List>\n    </ActionBar>\n  );\n};\n```\n\n### Overflow Example\n\n`ActionBar` container can contain up to 3 actions and an Overflow Menu if there are more than 3\nactions, the other remaining actions should be placed into an Overflow Menu that is launched by\nclicking the Overflow Button.\n\nAlso, ActionBar is a responsive component based on the width of its container. If the rendered\nactions exceed the width of the `ActionBar.List`, an overflow menu will be rendered. This only works\nagainst the dynamic API where you give the `ActionBarModel` an array of items to be rendered. The\ndynamic API handles the React `key` for you based on the item's identifier. The dynamic API requires\neither an `id` on each item object or a `getId` function that returns an identifier based on the\nitem. The below example uses an `id` property on each item.\n\nThe dynamic API takes in any object, but since nothing is known about your object, a\n[render prop](https://reactjs.org/docs/render-props.html) is necessary to instruct a list how it\nshould render.\n```tsx\nimport React from 'react';\n\nimport {ActionBar, useActionBarModel} from '@workday/canvas-kit-react/action-bar';\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {breakpoints} from '@workday/canvas-kit-react/common';\nimport {Box} from '@workday/canvas-kit-react/layout';\nimport {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';\nimport {px2rem} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\ntype MyActionItem = {\n  id: string;\n  text: React.ReactNode;\n};\n\nexport const OverflowActionBar = () => {\n  const [items] = React.useState<MyActionItem[]>([\n    {id: 'first', text: 'First Action'},\n    {id: 'second', text: 'Second Action'},\n    {id: 'third', text: 'Third Action'},\n    {id: 'fourth', text: 'Fourth Action'},\n    {id: 'fifth', text: 'Fifth Action'},\n  ]);\n\n  const model = useActionBarModel({items});\n  const [containerWidth, setContainerWidth] = React.useState<string | number>('100%');\n\n  return (\n    <div>\n      <Box cs={{maxWidth: containerWidth, marginBlockEnd: system.gap.xxl}}>\n        <ActionBar model={model}>\n          <ActionBar.List\n            position=\"relative\"\n            as=\"section\"\n            aria-label=\"Action Bar\"\n            overflowButton={<ActionBar.OverflowButton aria-label=\"More actions\" />}\n          >\n            {(item: MyActionItem, index) => (\n              <ActionBar.Item\n                as={index === 0 ? PrimaryButton : undefined}\n                onClick={() => console.log(item.id)}\n              >\n                {item.text}\n              </ActionBar.Item>\n            )}\n          </ActionBar.List>\n          <ActionBar.Menu.Popper>\n            <ActionBar.Menu.Card cs={{maxWidth: px2rem(300), maxHeight: px2rem(200)}}>\n              <ActionBar.Menu.List>\n                {(item: MyActionItem) => (\n                  <ActionBar.Menu.Item onClick={() => console.log(item.id)}>\n                    {item.text}\n                  </ActionBar.Menu.Item>\n                )}\n              </ActionBar.Menu.List>\n            </ActionBar.Menu.Card>\n          </ActionBar.Menu.Popper>\n        </ActionBar>\n      </Box>\n      <footer>\n        <h4>Change Action Bar container size</h4>\n        <SegmentedControl onSelect={data => setContainerWidth(data.id)}>\n          <SegmentedControl.List role=\"group\" aria-label=\"container width control\">\n            <SegmentedControl.Item data-id=\"100%\">100%</SegmentedControl.Item>\n            <SegmentedControl.Item data-id={`${breakpoints.m}px`}>Small</SegmentedControl.Item>\n            <SegmentedControl.Item data-id=\"420px\">420px</SegmentedControl.Item>\n            <SegmentedControl.Item data-id={`${breakpoints.s}px`}>\n              Extra Small\n            </SegmentedControl.Item>\n          </SegmentedControl.List>\n        </SegmentedControl>\n        <br />\n        <p>Selected: {containerWidth}</p>\n      </footer>\n    </div>\n  );\n};\n```\n\nThe number of visible buttons can also be adjusted by using the model's `maximumVisible` attribute.\nYou can change it from the default of 3 to any number greater than 1 and less than items.length.\n```tsx\nimport React from 'react';\n\nimport {ActionBar} from '@workday/canvas-kit-react/action-bar';\n\ntype MyActionItem = {\n  id: string;\n  text: React.ReactNode;\n};\n\nexport const OverflowActionBarCustomButtonCount = () => {\n  const [items] = React.useState<MyActionItem[]>([\n    {id: 'view', text: 'View'},\n    {id: 'edit', text: 'Edit'},\n    {id: 'delete', text: 'Delete'},\n  ]);\n\n  return (\n    <ActionBar items={items} maximumVisible={2}>\n      <ActionBar.List\n        as=\"section\"\n        aria-label=\"Custom button count overflow example\"\n        position=\"relative\"\n        overflowButton={<ActionBar.OverflowButton aria-label=\"More actions\" />}\n      >\n        {(item: MyActionItem) => (\n          <ActionBar.Item onClick={() => console.log(item.id)}>{item.text}</ActionBar.Item>\n        )}\n      </ActionBar.List>\n      <ActionBar.Menu.Popper>\n        <ActionBar.Menu.Card>\n          <ActionBar.Menu.List>\n            {(item: MyActionItem) => (\n              <ActionBar.Menu.Item onClick={() => console.log(item.id)}>\n                {item.text}\n              </ActionBar.Menu.Item>\n            )}\n          </ActionBar.Menu.List>\n        </ActionBar.Menu.Card>\n      </ActionBar.Menu.Popper>\n    </ActionBar>\n  );\n};\n```\n\n## Accessibility\n\nThe primary accessibility goal is a clearly named group of page-level actions where every action is\na native, keyboard-operable button. Use Action Bar for the primary and secondary actions of a page\nor task. For a single action, use a [Button](/components/buttons/button/#accessibility) directly.\nFor a dense set of icon or dropdown controls that behaves as one tab stop, use\n[Toolbar](https://workday.github.io/canvas-kit/?path=/docs/components-buttons-toolbar--docs). For\nactions that open a task flow, compose [Modal](/components/popups/modal/#accessibility) or\n[Dialog](/components/popups/dialog/#accessibility) from an **`ActionBar.Item`**.\n\nSee the [Menu Button pattern (APG)](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/), the\n[Button pattern (APG)](https://www.w3.org/WAI/ARIA/apg/patterns/button/), and the Canvas Kit\n[Accessibility overview](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-overview--docs).\n\n### Minimum Accessible Structure\n\nThe following matches the [Basic Example](#basic-example): an **`ActionBar.List`** rendered as a\nlabelled `section`, with a primary action first and secondary actions after it. **`ActionBar.List`**\nand **`ActionBar.Item`** should always be inside **`ActionBar`**.\n\n```tsx\n\n<ActionBar>\n  <ActionBar.List as=\"section\" aria-label=\"Page actions\">\n    <ActionBar.Item as={PrimaryButton} onClick={() => console.log('first action')}>\n      First Action\n    </ActionBar.Item>\n    <ActionBar.Item>Second Action</ActionBar.Item>\n  </ActionBar.List>\n</ActionBar>;\n```\n\nProvide a translated, descriptive **`aria-label`** on **`ActionBar.List`**. Every\n**`ActionBar.Item`** needs non-empty visible text, which becomes its accessible name.\n\n### Built-in Behaviors\n\nCanvas Kit applies these automatically. **Do not duplicate them** in consuming code.\n\n**ARIA and DOM** (_applied by hooks/subcomponents_):\n\n- **`ActionBar`**: Does not render an element. It creates the model and wraps its children in\n  **`Menu`** so the overflow menu shares state.\n- **`ActionBar.List`**: Renders a `div` by default. It has no role of its own\u2014use `as=\"section\"`\n  with **`aria-label`** to expose a landmark. It is positioned fixed to the bottom of the viewport\n  unless you override `position`.\n- **`ActionBar.Item`**: Renders a native `<button>` through **`SecondaryButton`** (or the component\n  passed to `as`). It inherits the [Button accessibility](/components/buttons/button/#accessibility)\n  behavior, including visible label wiring and decorative `icon` handling.\n- **Overflow**: Items that do not fit, or that exceed `maximumVisible`, receive `aria-hidden`,\n  `inert`, and `disabled`, so they are removed from the tab order and the accessibility tree and\n  appear in the overflow menu instead.\n- **`ActionBar.OverflowButton`**: Renders a **`SecondaryButton`** with the related-actions icon,\n  `aria-haspopup`, and `aria-expanded` through the **`Menu.Target`**. It is `aria-hidden` with\n  `tabIndex={-1}` while no items overflow, and gains `tabIndex={0}` once items overflow.\n- **`ActionBar.Menu`**: Is the standard [Menu](/components/popups/menu/#accessibility).\n  **`ActionBar.Menu.List`** has `role=\"menu\"` labelled by the overflow button, and\n  **`ActionBar.Menu.Item`** has `role=\"menuitem\"` with roving `tabIndex`.\n\n**Focus** (_applied by the model_):\n\n- Opening the overflow menu moves focus to its first item.\n- Selecting an item closes the menu.\n- Closing the menu (Escape, outside click, or selection) returns focus to **`ActionBar.OverflowButton`**.\n\n**Keyboard**:\n\n| Key                                                   | Behavior                                                                                                                                                 |\n| ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| <kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd>      | Moves between each visible **`ActionBar.Item`** and the overflow button. Every visible item is its own tab stop; Action Bar does not use roving tabindex |\n| <kbd>Enter</kbd> / <kbd>Space</kbd>                   | Activates the focused item, or opens the overflow menu                                                                                                   |\n| <kbd>ArrowDown</kbd> / <kbd>ArrowUp</kbd>             | Opens the overflow menu from the overflow button                                                                                                         |\n| <kbd>ArrowDown</kbd> / <kbd>ArrowUp</kbd> inside menu | Moves between overflow menu items                                                                                                                        |\n| <kbd>Escape</kbd>                                     | Closes the overflow menu and returns focus to the overflow button                                                                                        |\n| <kbd>Tab</kbd> inside menu                            | Closes the menu and moves focus to the next focusable element on the page                                                                                |\n\n**Screen reader expectations** (_when built-in behaviors are used as intended_):\n\n- On entering the group, the landmark is announced with the **`aria-label`** (for example, \"Page\n  actions, region\").\n- Each visible item is announced by its text and role (for example, \"First Action, button\").\n- The overflow button is announced with its **`aria-label`** and as a menu button with expanded or\n  collapsed state (for example, \"More actions, menu button, collapsed\").\n- Items moved into the overflow menu are no longer announced as buttons in the bar. They are\n  announced as menu items when the menu is open.\n\n### Accessibility Requirements\n\nRequired in application code for an accessible Action Bar. Rows marked _(conditional)_ apply only\nwhen the situation matches\u2014otherwise omit.\n\n**If no design spec is provided:** render **`ActionBar`** \u2192 **`ActionBar.List`** with `as=\"section\"`\nand a translated **`aria-label`**, one primary **`ActionBar.Item`** first, followed by secondary\n**`ActionBar.Item`** components with visible text. Omit `icon`, `disabled`, the overflow API, custom\n`maximumVisible`, and custom `data-id` unless the spec requires them.\n\n| Requirement                          | How to satisfy                                                                                                                                                                                                           |\n| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| Group label                          | `as=\"section\"` and a translated **`aria-label`** on **`ActionBar.List`** that is unique among landmarks on the page                                                                                                      |\n| Item accessible name                 | Non-empty visible text as the child of every **`ActionBar.Item`**                                                                                                                                                        |\n| Composition order                    | **`ActionBar`** \u2192 **`ActionBar.List`** \u2192 **`ActionBar.Item`**; add **`ActionBar.Menu`** as a sibling of **`ActionBar.List`** for overflow                                                                                |\n| Primary action _(conditional)_       | **`as={PrimaryButton}`** on only the first **`ActionBar.Item`**; secondary actions use the default; do not use **`TertiaryButton`**                                                                                      |\n| Destructive action _(conditional)_   | **`as={DeleteButton}`** only for destructive actions, per design                                                                                                                                                         |\n| Decorative icon _(conditional)_      | **`icon`** on **`ActionBar.Item`** with visible text\u2014no extra ARIA on the icon                                                                                                                                           |\n| Overflow button name _(conditional)_ | Translated **`aria-label`** on **`ActionBar.OverflowButton`** (required by its type), passed through **`overflowButton`** on **`ActionBar.List`**                                                                        |\n| Overflow menu _(conditional)_        | Dynamic API: `items` on **`useActionBarModel`**, render props on both **`ActionBar.List`** and **`ActionBar.Menu.List`**, and **`ActionBar.Menu.Popper`** \u2192 **`Card`** \u2192 **`List`** \u2192 **`Item`** with the same item text |\n| Menu item activation _(conditional)_ | The same `onClick` handler on **`ActionBar.Item`** and its **`ActionBar.Menu.Item`** counterpart so an action behaves the same wherever it renders                                                                       |\n| Fixed placement _(conditional)_      | **`ActionBar.List`** is `position: fixed` at the bottom of the viewport. Reserve space so page content and focused controls are not hidden behind it, or pass `position=\"relative\"` when the bar sits in the page flow   |\n| Disabled action _(conditional)_      | Native **`disabled`** on **`ActionBar.Item`** when the spec marks the action unavailable                                                                                                                                 |\n\n**Summary for code generation:**\n\n- **REQUIRED:** **`ActionBar.List`** with `as=\"section\"` and a translated **`aria-label`**; every\n  **`ActionBar.Item`** with visible text; one primary action first\n- **CONDITIONAL:** **`icon`**; **`DeleteButton`**; **`overflowButton`** with an **`aria-label`**;\n  matching **`ActionBar.Menu`** items and handlers; `position=\"relative\"`; **`disabled`**\n\n### Anti-Patterns\n\nDo **not** generate code that does the following (see **Accessibility Requirements** above for what\nto supply instead):\n\n- Omit `as=\"section\"` or **`aria-label`** on **`ActionBar.List`**, which leaves the group\n  unidentifiable to screen reader users\n- Reuse the same **`aria-label`** for **`ActionBar.List`** and another landmark on the page\n- Use more than one **`PrimaryButton`** or any **`TertiaryButton`** in an Action Bar\n- Render **`ActionBar.Item`** without visible text or as a non-button element with `onClick`\n- Add `role=\"toolbar\"`, `role=\"group\"`, roving tabindex, or arrow-key handlers to\n  **`ActionBar.List`**\u2014each item must be a separate tab stop\n- Render **`ActionBar.OverflowButton`** without **`aria-label`**\n- Set `aria-haspopup`, `aria-expanded`, or `aria-hidden` on **`ActionBar.OverflowButton`** or\n  **`ActionBar.Item`**\u2014the model sets them\n- Hide overflowing items with CSS, `hidden`, or conditional rendering\u2014use the dynamic API\n  and `maximumVisible`\n- Use the overflow behavior with static children\u2014it requires `items` on the model and render props\n- Provide an overflow menu whose items differ in text or behavior from the action bar items\n- Move focus manually after the overflow menu closes\u2014**`Menu`** returns focus to the overflow button\n- Leave the fixed **`ActionBar.List`** covering page content or focused controls\n\n## Component API\n\n",
+      accessibilityProse: '## Accessibility\n\nThe primary accessibility goal is a clearly named group of page-level actions where every action is\na native, keyboard-operable button. Use Action Bar for the primary and secondary actions of a page\nor task. For a single action, use a [Button](/components/buttons/button/#accessibility) directly.\nFor a dense set of icon or dropdown controls that behaves as one tab stop, use\n[Toolbar](https://workday.github.io/canvas-kit/?path=/docs/components-buttons-toolbar--docs). For\nactions that open a task flow, compose [Modal](/components/popups/modal/#accessibility) or\n[Dialog](/components/popups/dialog/#accessibility) from an **`ActionBar.Item`**.\n\nSee the [Menu Button pattern (APG)](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/), the\n[Button pattern (APG)](https://www.w3.org/WAI/ARIA/apg/patterns/button/), and the Canvas Kit\n[Accessibility overview](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-overview--docs).\n\n### Minimum Accessible Structure\n\nThe following matches the [Basic Example](#basic-example): an **`ActionBar.List`** rendered as a\nlabelled `section`, with a primary action first and secondary actions after it. **`ActionBar.List`**\nand **`ActionBar.Item`** should always be inside **`ActionBar`**.\n\n```tsx\n\n<ActionBar>\n  <ActionBar.List as="section" aria-label="Page actions">\n    <ActionBar.Item as={PrimaryButton} onClick={() => console.log(\'first action\')}>\n      First Action\n    </ActionBar.Item>\n    <ActionBar.Item>Second Action</ActionBar.Item>\n  </ActionBar.List>\n</ActionBar>;\n```\n\nProvide a translated, descriptive **`aria-label`** on **`ActionBar.List`**. Every\n**`ActionBar.Item`** needs non-empty visible text, which becomes its accessible name.\n\n### Built-in Behaviors\n\nCanvas Kit applies these automatically. **Do not duplicate them** in consuming code.\n\n**ARIA and DOM** (_applied by hooks/subcomponents_):\n\n- **`ActionBar`**: Does not render an element. It creates the model and wraps its children in\n  **`Menu`** so the overflow menu shares state.\n- **`ActionBar.List`**: Renders a `div` by default. It has no role of its own\u2014use `as="section"`\n  with **`aria-label`** to expose a landmark. It is positioned fixed to the bottom of the viewport\n  unless you override `position`.\n- **`ActionBar.Item`**: Renders a native `<button>` through **`SecondaryButton`** (or the component\n  passed to `as`). It inherits the [Button accessibility](/components/buttons/button/#accessibility)\n  behavior, including visible label wiring and decorative `icon` handling.\n- **Overflow**: Items that do not fit, or that exceed `maximumVisible`, receive `aria-hidden`,\n  `inert`, and `disabled`, so they are removed from the tab order and the accessibility tree and\n  appear in the overflow menu instead.\n- **`ActionBar.OverflowButton`**: Renders a **`SecondaryButton`** with the related-actions icon,\n  `aria-haspopup`, and `aria-expanded` through the **`Menu.Target`**. It is `aria-hidden` with\n  `tabIndex={-1}` while no items overflow, and gains `tabIndex={0}` once items overflow.\n- **`ActionBar.Menu`**: Is the standard [Menu](/components/popups/menu/#accessibility).\n  **`ActionBar.Menu.List`** has `role="menu"` labelled by the overflow button, and\n  **`ActionBar.Menu.Item`** has `role="menuitem"` with roving `tabIndex`.\n\n**Focus** (_applied by the model_):\n\n- Opening the overflow menu moves focus to its first item.\n- Selecting an item closes the menu.\n- Closing the menu (Escape, outside click, or selection) returns focus to **`ActionBar.OverflowButton`**.\n\n**Keyboard**:\n\n| Key                                                   | Behavior                                                                                                                                                 |\n| ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| <kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd>      | Moves between each visible **`ActionBar.Item`** and the overflow button. Every visible item is its own tab stop; Action Bar does not use roving tabindex |\n| <kbd>Enter</kbd> / <kbd>Space</kbd>                   | Activates the focused item, or opens the overflow menu                                                                                                   |\n| <kbd>ArrowDown</kbd> / <kbd>ArrowUp</kbd>             | Opens the overflow menu from the overflow button                                                                                                         |\n| <kbd>ArrowDown</kbd> / <kbd>ArrowUp</kbd> inside menu | Moves between overflow menu items                                                                                                                        |\n| <kbd>Escape</kbd>                                     | Closes the overflow menu and returns focus to the overflow button                                                                                        |\n| <kbd>Tab</kbd> inside menu                            | Closes the menu and moves focus to the next focusable element on the page                                                                                |\n\n**Screen reader expectations** (_when built-in behaviors are used as intended_):\n\n- On entering the group, the landmark is announced with the **`aria-label`** (for example, "Page\n  actions, region").\n- Each visible item is announced by its text and role (for example, "First Action, button").\n- The overflow button is announced with its **`aria-label`** and as a menu button with expanded or\n  collapsed state (for example, "More actions, menu button, collapsed").\n- Items moved into the overflow menu are no longer announced as buttons in the bar. They are\n  announced as menu items when the menu is open.\n\n### Accessibility Requirements\n\nRequired in application code for an accessible Action Bar. Rows marked _(conditional)_ apply only\nwhen the situation matches\u2014otherwise omit.\n\n**If no design spec is provided:** render **`ActionBar`** \u2192 **`ActionBar.List`** with `as="section"`\nand a translated **`aria-label`**, one primary **`ActionBar.Item`** first, followed by secondary\n**`ActionBar.Item`** components with visible text. Omit `icon`, `disabled`, the overflow API, custom\n`maximumVisible`, and custom `data-id` unless the spec requires them.\n\n| Requirement                          | How to satisfy                                                                                                                                                                                                           |\n| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| Group label                          | `as="section"` and a translated **`aria-label`** on **`ActionBar.List`** that is unique among landmarks on the page                                                                                                      |\n| Item accessible name                 | Non-empty visible text as the child of every **`ActionBar.Item`**                                                                                                                                                        |\n| Composition order                    | **`ActionBar`** \u2192 **`ActionBar.List`** \u2192 **`ActionBar.Item`**; add **`ActionBar.Menu`** as a sibling of **`ActionBar.List`** for overflow                                                                                |\n| Primary action _(conditional)_       | **`as={PrimaryButton}`** on only the first **`ActionBar.Item`**; secondary actions use the default; do not use **`TertiaryButton`**                                                                                      |\n| Destructive action _(conditional)_   | **`as={DeleteButton}`** only for destructive actions, per design                                                                                                                                                         |\n| Decorative icon _(conditional)_      | **`icon`** on **`ActionBar.Item`** with visible text\u2014no extra ARIA on the icon                                                                                                                                           |\n| Overflow button name _(conditional)_ | Translated **`aria-label`** on **`ActionBar.OverflowButton`** (required by its type), passed through **`overflowButton`** on **`ActionBar.List`**                                                                        |\n| Overflow menu _(conditional)_        | Dynamic API: `items` on **`useActionBarModel`**, render props on both **`ActionBar.List`** and **`ActionBar.Menu.List`**, and **`ActionBar.Menu.Popper`** \u2192 **`Card`** \u2192 **`List`** \u2192 **`Item`** with the same item text |\n| Menu item activation _(conditional)_ | The same `onClick` handler on **`ActionBar.Item`** and its **`ActionBar.Menu.Item`** counterpart so an action behaves the same wherever it renders                                                                       |\n| Fixed placement _(conditional)_      | **`ActionBar.List`** is `position: fixed` at the bottom of the viewport. Reserve space so page content and focused controls are not hidden behind it, or pass `position="relative"` when the bar sits in the page flow   |\n| Disabled action _(conditional)_      | Native **`disabled`** on **`ActionBar.Item`** when the spec marks the action unavailable                                                                                                                                 |\n\n**Summary for code generation:**\n\n- **REQUIRED:** **`ActionBar.List`** with `as="section"` and a translated **`aria-label`**; every\n  **`ActionBar.Item`** with visible text; one primary action first\n- **CONDITIONAL:** **`icon`**; **`DeleteButton`**; **`overflowButton`** with an **`aria-label`**;\n  matching **`ActionBar.Menu`** items and handlers; `position="relative"`; **`disabled`**\n\n### Anti-Patterns\n\nDo **not** generate code that does the following (see **Accessibility Requirements** above for what\nto supply instead):\n\n- Omit `as="section"` or **`aria-label`** on **`ActionBar.List`**, which leaves the group\n  unidentifiable to screen reader users\n- Reuse the same **`aria-label`** for **`ActionBar.List`** and another landmark on the page\n- Use more than one **`PrimaryButton`** or any **`TertiaryButton`** in an Action Bar\n- Render **`ActionBar.Item`** without visible text or as a non-button element with `onClick`\n- Add `role="toolbar"`, `role="group"`, roving tabindex, or arrow-key handlers to\n  **`ActionBar.List`**\u2014each item must be a separate tab stop\n- Render **`ActionBar.OverflowButton`** without **`aria-label`**\n- Set `aria-haspopup`, `aria-expanded`, or `aria-hidden` on **`ActionBar.OverflowButton`** or\n  **`ActionBar.Item`**\u2014the model sets them\n- Hide overflowing items with CSS, `hidden`, or conditional rendering\u2014use the dynamic API\n  and `maximumVisible`\n- Use the overflow behavior with static children\u2014it requires `items` on the model and render props\n- Provide an overflow menu whose items differ in text or behavior from the action bar items\n- Move focus manually after the overflow menu closes\u2014**`Menu`** returns focus to the overflow button\n- Leave the fixed **`ActionBar.List`** covering page content or focused controls'
     },
     "preview-tabs": {
       title: "Preview/Tabs",
@@ -1810,8 +1810,8 @@ var stories_config_default = {
       title: "Components/Buttons",
       storybookUrl: "https://workday.github.io/canvas-kit/?path=/docs/components-buttons--docs",
       mdxPath: "modules/react/button/stories/button/Button.mdx",
-      mdxProse: "# Canvas Kit Button\n\nClickable button elements that extend the native `<button>` element with Canvas styling.\n\n[> Workday Design Reference](https://design.workday.com/components/buttons/buttons)\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### PrimaryButton\n\nThe example below shows multiple instances of a `PrimaryButton` with various icon configurations.\n```tsx\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {\n  caretDownIcon,\n  plusIcon,\n  relatedActionsVerticalIcon,\n} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n  gap: system.gap.md,\n  padding: system.padding.md,\n});\n\nexport const Primary = () => (\n  <Flex cs={parentContainerStyles}>\n    <PrimaryButton>Primary</PrimaryButton>\n    <PrimaryButton icon={plusIcon} iconPosition=\"start\">\n      Primary\n    </PrimaryButton>\n    <PrimaryButton icon={caretDownIcon} iconPosition=\"end\">\n      Primary\n    </PrimaryButton>\n    <Tooltip title=\"Related Actions\">\n      <PrimaryButton icon={relatedActionsVerticalIcon} />\n    </Tooltip>\n  </Flex>\n);\n```\n\nPrimary Buttons also have an `inverse` variant. While it looks similar to the default Secondary\nButton, the default outline as well as the hover and focus states are different. Use this variant\nwhen you need to place a Primary Button on a dark or colorful background such as `neutral400`.\n```tsx\nimport React from 'react';\n\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {\n  caretDownIcon,\n  plusIcon,\n  relatedActionsVerticalIcon,\n} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n  gap: system.gap.md,\n  backgroundColor: system.color.surface.contrast.default,\n  padding: system.padding.md,\n});\n\nexport const PrimaryInverse = () => (\n  <Flex cs={parentContainerStyles}>\n    <PrimaryButton variant=\"inverse\">Primary</PrimaryButton>\n    <PrimaryButton icon={plusIcon} iconPosition=\"start\" variant=\"inverse\">\n      Primary\n    </PrimaryButton>\n    <PrimaryButton icon={caretDownIcon} iconPosition=\"end\" variant=\"inverse\">\n      Primary\n    </PrimaryButton>\n    <Tooltip title=\"Related Actions\">\n      <PrimaryButton icon={relatedActionsVerticalIcon} variant=\"inverse\" />\n    </Tooltip>\n  </Flex>\n);\n```\n\n### SecondaryButton\n\nThe example below shows multiple instances of a `SecondaryButton` with various icon configurations.\n```tsx\nimport React from 'react';\n\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {\n  caretDownIcon,\n  plusIcon,\n  relatedActionsVerticalIcon,\n} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n  gap: system.gap.md,\n  padding: system.padding.md,\n});\n\nexport const Secondary = () => (\n  <Flex cs={parentContainerStyles}>\n    <SecondaryButton>Secondary</SecondaryButton>\n    <SecondaryButton icon={plusIcon} iconPosition=\"start\">\n      Secondary\n    </SecondaryButton>\n    <SecondaryButton icon={caretDownIcon} iconPosition=\"end\">\n      Secondary\n    </SecondaryButton>\n    <Tooltip title=\"Related Actions\">\n      <SecondaryButton icon={relatedActionsVerticalIcon} />\n    </Tooltip>\n  </Flex>\n);\n```\n\nSecondary Buttons also have an `inverse` variant. Use this when you need to place a Secondary Button\non a dark or colorful background such as `neutral400`.\n```tsx\nimport React from 'react';\n\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {\n  caretDownIcon,\n  plusIcon,\n  relatedActionsVerticalIcon,\n} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n  gap: system.gap.md,\n  padding: system.padding.md,\n  backgroundColor: system.color.surface.contrast.default,\n});\n\nexport const SecondaryInverse = () => (\n  <Flex cs={parentContainerStyles}>\n    <SecondaryButton variant=\"inverse\">Secondary</SecondaryButton>\n    <SecondaryButton icon={plusIcon} variant=\"inverse\">\n      Secondary\n    </SecondaryButton>\n    <SecondaryButton icon={caretDownIcon} variant=\"inverse\" iconPosition=\"end\">\n      Secondary\n    </SecondaryButton>\n    <Tooltip title=\"Related Actions\">\n      <SecondaryButton icon={relatedActionsVerticalIcon} variant=\"inverse\" />\n    </Tooltip>\n  </Flex>\n);\n```\n\n### TertiaryButton\n\nThe example below shows multiple instances of a `TertiaryButton` with various icon configurations.\n```tsx\nimport React from 'react';\n\nimport {TertiaryButton} from '@workday/canvas-kit-react/button';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {\n  caretDownIcon,\n  plusIcon,\n  relatedActionsVerticalIcon,\n} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n  gap: system.gap.md,\n  padding: system.padding.md,\n});\n\nexport const Tertiary = () => (\n  <Flex cs={parentContainerStyles}>\n    <TertiaryButton>Tertiary</TertiaryButton>\n    <TertiaryButton icon={plusIcon} iconPosition=\"start\">\n      Tertiary\n    </TertiaryButton>\n    <TertiaryButton icon={caretDownIcon} iconPosition=\"end\">\n      Tertiary\n    </TertiaryButton>\n    <Tooltip title=\"Related Actions\">\n      <TertiaryButton icon={relatedActionsVerticalIcon} />\n    </Tooltip>\n  </Flex>\n);\n```\n\nTertiary Buttons also have an `inverse` variant. Use this when you need to place a Tertiary Button\non a dark or colorful background such as `neutral400`.\n```tsx\nimport React from 'react';\n\nimport {TertiaryButton} from '@workday/canvas-kit-react/button';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {\n  caretDownIcon,\n  plusIcon,\n  relatedActionsVerticalIcon,\n} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n  gap: system.gap.md,\n  padding: system.padding.md,\n  backgroundColor: system.color.surface.contrast.default,\n});\n\nexport const TertiaryInverse = () => (\n  <Flex cs={parentContainerStyles}>\n    <TertiaryButton variant=\"inverse\">Tertiary</TertiaryButton>\n    <TertiaryButton icon={plusIcon} iconPosition=\"start\" variant=\"inverse\">\n      Tertiary\n    </TertiaryButton>\n    <TertiaryButton icon={caretDownIcon} iconPosition=\"end\" variant=\"inverse\">\n      Tertiary\n    </TertiaryButton>\n    <Tooltip title=\"Related Actions\">\n      <TertiaryButton icon={relatedActionsVerticalIcon} variant=\"inverse\" />\n    </Tooltip>\n  </Flex>\n);\n```\n\n### DeleteButton\n```tsx\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {trashIcon} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n  gap: system.gap.md,\n  padding: system.padding.md,\n});\n\nexport const Delete = () => (\n  <Flex cs={parentContainerStyles}>\n    <DeleteButton>Delete</DeleteButton>\n    <DeleteButton icon={trashIcon} iconPosition=\"start\">\n      Delete\n    </DeleteButton>\n    <DeleteButton icon={trashIcon} iconPosition=\"end\">\n      Delete\n    </DeleteButton>\n    <Tooltip title=\"Delete\">\n      <DeleteButton icon={trashIcon} />\n    </Tooltip>\n  </Flex>\n);\n```\n\nDelete Buttons also have an `outline` variant.\n```tsx\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {trashIcon} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n  display: 'flex',\n  gap: system.gap.md,\n  padding: system.padding.md,\n});\n\nexport const DeleteOutline = () => (\n  <div className={parentContainerStyles}>\n    <DeleteButton variant=\"outline\">Delete</DeleteButton>\n    <DeleteButton icon={trashIcon} iconPosition=\"start\" variant=\"outline\">\n      Delete\n    </DeleteButton>\n    <DeleteButton icon={trashIcon} iconPosition=\"end\" variant=\"outline\">\n      Delete\n    </DeleteButton>\n    <Tooltip title=\"Delete\">\n      <DeleteButton icon={trashIcon} variant=\"outline\" />\n    </Tooltip>\n  </div>\n);\n```\n\n### Grow Prop\n\nThe example below shows the use of the `grow` prop on different variants of buttons. This will set\nthe width of the button to the width of its container.\n```tsx\nimport {\n  DeleteButton,\n  PrimaryButton,\n  SecondaryButton,\n  TertiaryButton,\n} from '@workday/canvas-kit-react/button';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {px2rem} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst baseStyles = {\n  gap: system.gap.md,\n  padding: system.padding.md,\n  flexDirection: 'column',\n  maxWidth: px2rem(300),\n};\n\nexport const Grow = () => (\n  <Flex cs={baseStyles}>\n    <PrimaryButton size=\"small\" grow={true}>\n      Primary\n    </PrimaryButton>\n    <SecondaryButton size=\"small\" grow={true}>\n      Secondary\n    </SecondaryButton>\n    <TertiaryButton size=\"small\" grow={true}>\n      Tertiary\n    </TertiaryButton>\n    <DeleteButton size=\"small\" grow={true}>\n      Delete\n    </DeleteButton>\n  </Flex>\n);\n```\n\n### Custom Styles\n\nAll of our buttons support custom styling via the `cs` prop. For more information, check our\n[\"How To Customize Styles\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs)\nor view the example below.\n```tsx\nimport {PrimaryButton, PrimaryButtonProps, buttonStencil} from '@workday/canvas-kit-react/button';\nimport {createComponent} from '@workday/canvas-kit-react/common';\nimport {systemIconStencil} from '@workday/canvas-kit-react/icon';\nimport {Grid} from '@workday/canvas-kit-react/layout';\nimport {createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';\nimport {plusIcon} from '@workday/canvas-system-icons-web';\nimport {base, system} from '@workday/canvas-tokens-web';\n\nconst customContainer = createStyles({\n  gap: system.gap.md,\n  maxWidth: 'max-content',\n});\n\nconst myButtonStencil = createStencil({\n  base: {\n    [buttonStencil.vars.background]: base.green100,\n    [buttonStencil.vars.label]: base.green700,\n    [systemIconStencil.vars.color]: base.green700,\n    [buttonStencil.vars.borderRadius]: px2rem(2),\n    border: `${px2rem(3)} solid transparent`,\n    '&:focus-visible': {\n      [buttonStencil.vars.background]: base.green700,\n      [buttonStencil.vars.boxShadowInner]: base.green100,\n      [buttonStencil.vars.boxShadowOuter]: base.green700,\n      [systemIconStencil.vars.color]: system.color.fg.inverse,\n    },\n    '&:hover': {\n      [buttonStencil.vars.background]: base.green600,\n      border: `${px2rem(3)} dotted ${base.green700}`,\n      [buttonStencil.vars.label]: base.green700,\n      [systemIconStencil.vars.color]: system.color.fg.inverse,\n    },\n    '&:active': {\n      [buttonStencil.vars.background]: base.green700,\n      [buttonStencil.vars.label]: system.color.fg.inverse,\n      [systemIconStencil.vars.color]: system.color.fg.inverse,\n    },\n  },\n});\n\nconst MyCustomButton = createComponent('button')({\n  Component: ({children, cs, ...elemProps}: PrimaryButtonProps, ref, Element) => (\n    <PrimaryButton as={Element} ref={ref} cs={[myButtonStencil(), cs]} {...elemProps}>\n      {children}\n    </PrimaryButton>\n  ),\n});\n\nconst myCustomStyles = createStyles({\n  padding: system.padding.md,\n  textTransform: 'uppercase',\n  [buttonStencil.vars.background]: base.slate200,\n  [buttonStencil.vars.label]: base.slate700,\n  [systemIconStencil.vars.color]: base.slate700,\n  [buttonStencil.vars.borderRadius]: system.shape.md,\n  [buttonStencil.vars.border]: base.slate800,\n  '&:focus-visible': {\n    [buttonStencil.vars.background]: base.slate700,\n    [buttonStencil.vars.boxShadowInner]: base.slate200,\n    [buttonStencil.vars.boxShadowOuter]: base.slate700,\n    [systemIconStencil.vars.color]: system.color.fg.inverse,\n  },\n  '&:hover': {\n    [buttonStencil.vars.background]: base.slate600,\n    [buttonStencil.vars.border]: `${px2rem(3)} dotted ${base.slate700}`,\n    [buttonStencil.vars.label]: base.slate700,\n    [systemIconStencil.vars.color]: system.color.fg.inverse,\n    border: `${px2rem(3)} dotted ${base.slate700}`,\n  },\n  '&:active': {\n    [buttonStencil.vars.background]: base.slate700,\n    [buttonStencil.vars.label]: system.color.fg.inverse,\n    [systemIconStencil.vars.color]: system.color.fg.inverse,\n  },\n});\n\nconst customColors = {\n  default: {\n    background: base.amber100,\n    icon: base.amber500,\n    label: base.amber500,\n  },\n  focus: {\n    background: base.amber500,\n    boxShadowInner: base.amber100,\n    boxShadowOuter: base.amber500,\n  },\n  hover: {\n    background: base.amber400,\n    icon: system.color.fg.inverse,\n  },\n  active: {\n    background: base.amber500,\n  },\n  disabled: {},\n};\n\nexport const CustomStyles = () => (\n  <Grid cs={customContainer}>\n    <MyCustomButton icon={plusIcon}>Styling Override Via Stencil Variables</MyCustomButton>\n    <MyCustomButton icon={plusIcon} cs={myCustomStyles}>\n      Style Override Via Create Styles\n    </MyCustomButton>\n    <PrimaryButton icon={plusIcon} colors={customColors}>\n      Styling Override Via Colors Prop\n    </PrimaryButton>\n  </Grid>\n);\n```\n\n### Theme Overrides\n\nThe most common way to theme our buttons is to pass a `theme` object at the root level of the\napplication via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**`\ntokens with the fallback being `brand.primary.**`.\n\n> **Caution:** Setting `--cnvs-brand-action**` tokens at the `:root` CSS will override all\n> `PrimaryButton` theme colors set at the `CanvasProvider` level.\n\n> **Note:** You should **not** individually theme components wrapping them with the\n> `CanvasProvider`, but rather theme at the root level of the application.\n```tsx\nimport React from 'react';\n\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Heading} from '@workday/canvas-kit-react/text';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {\n  caretDownIcon,\n  plusIcon,\n  relatedActionsVerticalIcon,\n} from '@workday/canvas-system-icons-web';\nimport {brand, system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n  gap: system.gap.md,\n  padding: system.padding.md,\n});\n\nconst customActionTheme = createStyles({\n  [brand.action.base]: 'teal',\n  [brand.action.accent]: 'white',\n  [brand.action.dark]: 'hsla(180, 100%, 20%)',\n  [brand.action.darkest]: 'hsla(180, 100%, 16%)',\n});\n\nexport const ThemeOverrides = () => (\n  <div>\n    <Heading size=\"medium\" as=\"h3\">\n      Override Primary Color Via Canvas Provider\n    </Heading>\n    <CanvasProvider\n      theme={{\n        canvas: {\n          palette: {\n            primary: {\n              main: 'navy',\n            },\n          },\n        },\n      }}\n    >\n      <Flex cs={parentContainerStyles}>\n        <PrimaryButton>Primary</PrimaryButton>\n        <PrimaryButton icon={plusIcon} iconPosition=\"start\">\n          Primary\n        </PrimaryButton>\n        <PrimaryButton icon={caretDownIcon} iconPosition=\"end\">\n          Primary\n        </PrimaryButton>\n        <PrimaryButton aria-label=\"Related Actions\" icon={relatedActionsVerticalIcon} />\n      </Flex>\n    </CanvasProvider>\n    <Heading size=\"medium\" as=\"h3\">\n      Override Action Color Via CSS Action Token\n    </Heading>\n    <div className={customActionTheme}>\n      <Flex cs={parentContainerStyles}>\n        <PrimaryButton>Primary</PrimaryButton>\n        <PrimaryButton icon={plusIcon} iconPosition=\"start\">\n          Primary\n        </PrimaryButton>\n        <PrimaryButton icon={caretDownIcon} iconPosition=\"end\">\n          Primary\n        </PrimaryButton>\n        <PrimaryButton aria-label=\"Related Actions\" icon={relatedActionsVerticalIcon} />\n      </Flex>\n    </div>\n  </div>\n);\n```\n\n## Accessibility\n\nOur button components render semantic HTML `<button>` elements to the browser DOM. This means that\nARIA roles won't be necessary in most cases, and `onClick` listeners will automatically support the\nEnter and Space keys for keyboard interactions.\n\n[Button Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/button/)\n\n- An `aria-label` is only necessary for icon-only buttons in most cases. Using\n  [Canvas Kit's tooltip component](/components/popups/tooltip/) will handle this for you, and all\n  users will be able to see the label for the button.\n- When button designs have 2 toggle states, an `aria-pressed={true | false}` property is required\n  for screen reader support. For example, see Canvas Kit's\n  [Segmented Control component](/components/buttons/segmented-control/).\n- When buttons have an attached menu, an `aria-haspopup=\"true\"` property is required. Using\n  [Canvas Kit's Menu component](/components/popups/menu/) will handle this for you.\n- The icons used in text buttons are decorative in most cases and include ARIA `role=\"presentation\"`\n  and `focusable=\"false\"`. In some special cases where an icon does add meaning, you may be required\n  to change the `role` and add an `aria-label` to the icon for equivalent screen reader support.\n\n### Disabled Buttons\n\n- Disabled buttons use the `disabled` attribute, removing them from the tab order.\n- Disabled styling is exempt from WCAG contrast requirements.\n\n### Screen Reader Experience\n\n- Button text content is announced along with the button role (e.g., \"Primary, button\").\n- Icon-only buttons announce the `aria-label` value along with the button role.\n- Toggle buttons announce their pressed/unpressed state (e.g., \"Activity Stream, toggle button,\n  pressed\" and check out the [Segmented Control component](/components/buttons/segmented-control/)).\n\n### Touch Target Size\n\n- All buttons meet the minimum 24px by 24px touch target size requirement for mobile accessibility.\n- Button padding ensures adequate spacing between interactive elements to prevent accidental\n  activation.\n\n### Button Groups\n\n- Related buttons can be grouped together with HTML unordered list elements or with `<fieldset>` and\n  `<legend>` elements. This can help give additional context to screen readers about the purpose of\n  the group.\n\n## Component API\n\n## Specifications\n\n",
-      accessibilityProse: '## Accessibility\n\nOur button components render semantic HTML `<button>` elements to the browser DOM. This means that\nARIA roles won\'t be necessary in most cases, and `onClick` listeners will automatically support the\nEnter and Space keys for keyboard interactions.\n\n[Button Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/button/)\n\n- An `aria-label` is only necessary for icon-only buttons in most cases. Using\n  [Canvas Kit\'s tooltip component](/components/popups/tooltip/) will handle this for you, and all\n  users will be able to see the label for the button.\n- When button designs have 2 toggle states, an `aria-pressed={true | false}` property is required\n  for screen reader support. For example, see Canvas Kit\'s\n  [Segmented Control component](/components/buttons/segmented-control/).\n- When buttons have an attached menu, an `aria-haspopup="true"` property is required. Using\n  [Canvas Kit\'s Menu component](/components/popups/menu/) will handle this for you.\n- The icons used in text buttons are decorative in most cases and include ARIA `role="presentation"`\n  and `focusable="false"`. In some special cases where an icon does add meaning, you may be required\n  to change the `role` and add an `aria-label` to the icon for equivalent screen reader support.\n\n### Disabled Buttons\n\n- Disabled buttons use the `disabled` attribute, removing them from the tab order.\n- Disabled styling is exempt from WCAG contrast requirements.\n\n### Screen Reader Experience\n\n- Button text content is announced along with the button role (e.g., "Primary, button").\n- Icon-only buttons announce the `aria-label` value along with the button role.\n- Toggle buttons announce their pressed/unpressed state (e.g., "Activity Stream, toggle button,\n  pressed" and check out the [Segmented Control component](/components/buttons/segmented-control/)).\n\n### Touch Target Size\n\n- All buttons meet the minimum 24px by 24px touch target size requirement for mobile accessibility.\n- Button padding ensures adequate spacing between interactive elements to prevent accidental\n  activation.\n\n### Button Groups\n\n- Related buttons can be grouped together with HTML unordered list elements or with `<fieldset>` and\n  `<legend>` elements. This can help give additional context to screen readers about the purpose of\n  the group.'
+      mdxProse: "# Canvas Kit Button\n\nClickable button elements that extend the native `<button>` element with Canvas styling.\n\n[> Workday Design Reference](https://design.workday.com/components/buttons/buttons)\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\n### PrimaryButton\n\nThe example below shows multiple instances of a `PrimaryButton` with various icon configurations.\n```tsx\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {\n  caretDownIcon,\n  plusIcon,\n  relatedActionsVerticalIcon,\n} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n  gap: system.gap.md,\n  padding: system.padding.md,\n});\n\nexport const Primary = () => (\n  <Flex cs={parentContainerStyles}>\n    <PrimaryButton>Primary</PrimaryButton>\n    <PrimaryButton icon={plusIcon} iconPosition=\"start\">\n      Primary\n    </PrimaryButton>\n    <PrimaryButton icon={caretDownIcon} iconPosition=\"end\">\n      Primary\n    </PrimaryButton>\n    <Tooltip title=\"Related Actions\">\n      <PrimaryButton icon={relatedActionsVerticalIcon} />\n    </Tooltip>\n  </Flex>\n);\n```\n\nPrimary Buttons also have an `inverse` variant. While it looks similar to the default Secondary\nButton, the default outline as well as the hover and focus states are different. Use this variant\nwhen you need to place a Primary Button on a dark or colorful background such as `neutral400`.\n```tsx\nimport React from 'react';\n\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {\n  caretDownIcon,\n  plusIcon,\n  relatedActionsVerticalIcon,\n} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n  gap: system.gap.md,\n  backgroundColor: system.color.surface.contrast.default,\n  padding: system.padding.md,\n});\n\nexport const PrimaryInverse = () => (\n  <Flex cs={parentContainerStyles}>\n    <PrimaryButton variant=\"inverse\">Primary</PrimaryButton>\n    <PrimaryButton icon={plusIcon} iconPosition=\"start\" variant=\"inverse\">\n      Primary\n    </PrimaryButton>\n    <PrimaryButton icon={caretDownIcon} iconPosition=\"end\" variant=\"inverse\">\n      Primary\n    </PrimaryButton>\n    <Tooltip title=\"Related Actions\">\n      <PrimaryButton icon={relatedActionsVerticalIcon} variant=\"inverse\" />\n    </Tooltip>\n  </Flex>\n);\n```\n\n### SecondaryButton\n\nThe example below shows multiple instances of a `SecondaryButton` with various icon configurations.\n```tsx\nimport React from 'react';\n\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {\n  caretDownIcon,\n  plusIcon,\n  relatedActionsVerticalIcon,\n} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n  gap: system.gap.md,\n  padding: system.padding.md,\n});\n\nexport const Secondary = () => (\n  <Flex cs={parentContainerStyles}>\n    <SecondaryButton>Secondary</SecondaryButton>\n    <SecondaryButton icon={plusIcon} iconPosition=\"start\">\n      Secondary\n    </SecondaryButton>\n    <SecondaryButton icon={caretDownIcon} iconPosition=\"end\">\n      Secondary\n    </SecondaryButton>\n    <Tooltip title=\"Related Actions\">\n      <SecondaryButton icon={relatedActionsVerticalIcon} />\n    </Tooltip>\n  </Flex>\n);\n```\n\nSecondary Buttons also have an `inverse` variant. Use this when you need to place a Secondary Button\non a dark or colorful background such as `neutral400`.\n```tsx\nimport React from 'react';\n\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {\n  caretDownIcon,\n  plusIcon,\n  relatedActionsVerticalIcon,\n} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n  gap: system.gap.md,\n  padding: system.padding.md,\n  backgroundColor: system.color.surface.contrast.default,\n});\n\nexport const SecondaryInverse = () => (\n  <Flex cs={parentContainerStyles}>\n    <SecondaryButton variant=\"inverse\">Secondary</SecondaryButton>\n    <SecondaryButton icon={plusIcon} variant=\"inverse\">\n      Secondary\n    </SecondaryButton>\n    <SecondaryButton icon={caretDownIcon} variant=\"inverse\" iconPosition=\"end\">\n      Secondary\n    </SecondaryButton>\n    <Tooltip title=\"Related Actions\">\n      <SecondaryButton icon={relatedActionsVerticalIcon} variant=\"inverse\" />\n    </Tooltip>\n  </Flex>\n);\n```\n\n### TertiaryButton\n\nThe example below shows multiple instances of a `TertiaryButton` with various icon configurations.\n```tsx\nimport React from 'react';\n\nimport {TertiaryButton} from '@workday/canvas-kit-react/button';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {\n  caretDownIcon,\n  plusIcon,\n  relatedActionsVerticalIcon,\n} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n  gap: system.gap.md,\n  padding: system.padding.md,\n});\n\nexport const Tertiary = () => (\n  <Flex cs={parentContainerStyles}>\n    <TertiaryButton>Tertiary</TertiaryButton>\n    <TertiaryButton icon={plusIcon} iconPosition=\"start\">\n      Tertiary\n    </TertiaryButton>\n    <TertiaryButton icon={caretDownIcon} iconPosition=\"end\">\n      Tertiary\n    </TertiaryButton>\n    <Tooltip title=\"Related Actions\">\n      <TertiaryButton icon={relatedActionsVerticalIcon} />\n    </Tooltip>\n  </Flex>\n);\n```\n\nTertiary Buttons also have an `inverse` variant. Use this when you need to place a Tertiary Button\non a dark or colorful background such as `neutral400`.\n```tsx\nimport React from 'react';\n\nimport {TertiaryButton} from '@workday/canvas-kit-react/button';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {\n  caretDownIcon,\n  plusIcon,\n  relatedActionsVerticalIcon,\n} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n  gap: system.gap.md,\n  padding: system.padding.md,\n  backgroundColor: system.color.surface.contrast.default,\n});\n\nexport const TertiaryInverse = () => (\n  <Flex cs={parentContainerStyles}>\n    <TertiaryButton variant=\"inverse\">Tertiary</TertiaryButton>\n    <TertiaryButton icon={plusIcon} iconPosition=\"start\" variant=\"inverse\">\n      Tertiary\n    </TertiaryButton>\n    <TertiaryButton icon={caretDownIcon} iconPosition=\"end\" variant=\"inverse\">\n      Tertiary\n    </TertiaryButton>\n    <Tooltip title=\"Related Actions\">\n      <TertiaryButton icon={relatedActionsVerticalIcon} variant=\"inverse\" />\n    </Tooltip>\n  </Flex>\n);\n```\n\n### DeleteButton\n```tsx\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {trashIcon} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n  gap: system.gap.md,\n  padding: system.padding.md,\n});\n\nexport const Delete = () => (\n  <Flex cs={parentContainerStyles}>\n    <DeleteButton>Delete</DeleteButton>\n    <DeleteButton icon={trashIcon} iconPosition=\"start\">\n      Delete\n    </DeleteButton>\n    <DeleteButton icon={trashIcon} iconPosition=\"end\">\n      Delete\n    </DeleteButton>\n    <Tooltip title=\"Delete\">\n      <DeleteButton icon={trashIcon} />\n    </Tooltip>\n  </Flex>\n);\n```\n\nDelete Buttons also have an `outline` variant.\n```tsx\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {trashIcon} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n  display: 'flex',\n  gap: system.gap.md,\n  padding: system.padding.md,\n});\n\nexport const DeleteOutline = () => (\n  <div className={parentContainerStyles}>\n    <DeleteButton variant=\"outline\">Delete</DeleteButton>\n    <DeleteButton icon={trashIcon} iconPosition=\"start\" variant=\"outline\">\n      Delete\n    </DeleteButton>\n    <DeleteButton icon={trashIcon} iconPosition=\"end\" variant=\"outline\">\n      Delete\n    </DeleteButton>\n    <Tooltip title=\"Delete\">\n      <DeleteButton icon={trashIcon} variant=\"outline\" />\n    </Tooltip>\n  </div>\n);\n```\n\n### Grow Prop\n\nThe example below shows the use of the `grow` prop on different variants of buttons. This will set\nthe width of the button to the width of its container.\n```tsx\nimport {\n  DeleteButton,\n  PrimaryButton,\n  SecondaryButton,\n  TertiaryButton,\n} from '@workday/canvas-kit-react/button';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {px2rem} from '@workday/canvas-kit-styling';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst baseStyles = {\n  gap: system.gap.md,\n  padding: system.padding.md,\n  flexDirection: 'column',\n  maxWidth: px2rem(300),\n};\n\nexport const Grow = () => (\n  <Flex cs={baseStyles}>\n    <PrimaryButton size=\"small\" grow={true}>\n      Primary\n    </PrimaryButton>\n    <SecondaryButton size=\"small\" grow={true}>\n      Secondary\n    </SecondaryButton>\n    <TertiaryButton size=\"small\" grow={true}>\n      Tertiary\n    </TertiaryButton>\n    <DeleteButton size=\"small\" grow={true}>\n      Delete\n    </DeleteButton>\n  </Flex>\n);\n```\n\n### Custom Styles\n\nAll of our buttons support custom styling via the `cs` prop. For more information, check our\n[\"How To Customize Styles\"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs)\nor view the example below.\n```tsx\nimport {PrimaryButton, PrimaryButtonProps, buttonStencil} from '@workday/canvas-kit-react/button';\nimport {createComponent} from '@workday/canvas-kit-react/common';\nimport {systemIconStencil} from '@workday/canvas-kit-react/icon';\nimport {Grid} from '@workday/canvas-kit-react/layout';\nimport {createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';\nimport {plusIcon} from '@workday/canvas-system-icons-web';\nimport {base, system} from '@workday/canvas-tokens-web';\n\nconst customContainer = createStyles({\n  gap: system.gap.md,\n  maxWidth: 'max-content',\n});\n\nconst myButtonStencil = createStencil({\n  base: {\n    [buttonStencil.vars.background]: base.green100,\n    [buttonStencil.vars.label]: base.green700,\n    [systemIconStencil.vars.color]: base.green700,\n    [buttonStencil.vars.borderRadius]: px2rem(2),\n    border: `${px2rem(3)} solid transparent`,\n    '&:focus-visible': {\n      [buttonStencil.vars.background]: base.green700,\n      [buttonStencil.vars.boxShadowInner]: base.green100,\n      [buttonStencil.vars.boxShadowOuter]: base.green700,\n      [systemIconStencil.vars.color]: system.color.fg.inverse,\n    },\n    '&:hover': {\n      [buttonStencil.vars.background]: base.green600,\n      border: `${px2rem(3)} dotted ${base.green700}`,\n      [buttonStencil.vars.label]: base.green700,\n      [systemIconStencil.vars.color]: system.color.fg.inverse,\n    },\n    '&:active': {\n      [buttonStencil.vars.background]: base.green700,\n      [buttonStencil.vars.label]: system.color.fg.inverse,\n      [systemIconStencil.vars.color]: system.color.fg.inverse,\n    },\n  },\n});\n\nconst MyCustomButton = createComponent('button')({\n  Component: ({children, cs, ...elemProps}: PrimaryButtonProps, ref, Element) => (\n    <PrimaryButton as={Element} ref={ref} cs={[myButtonStencil(), cs]} {...elemProps}>\n      {children}\n    </PrimaryButton>\n  ),\n});\n\nconst myCustomStyles = createStyles({\n  padding: system.padding.md,\n  textTransform: 'uppercase',\n  [buttonStencil.vars.background]: base.slate200,\n  [buttonStencil.vars.label]: base.slate700,\n  [systemIconStencil.vars.color]: base.slate700,\n  [buttonStencil.vars.borderRadius]: system.shape.md,\n  [buttonStencil.vars.border]: base.slate800,\n  '&:focus-visible': {\n    [buttonStencil.vars.background]: base.slate700,\n    [buttonStencil.vars.boxShadowInner]: base.slate200,\n    [buttonStencil.vars.boxShadowOuter]: base.slate700,\n    [systemIconStencil.vars.color]: system.color.fg.inverse,\n  },\n  '&:hover': {\n    [buttonStencil.vars.background]: base.slate600,\n    [buttonStencil.vars.border]: `${px2rem(3)} dotted ${base.slate700}`,\n    [buttonStencil.vars.label]: base.slate700,\n    [systemIconStencil.vars.color]: system.color.fg.inverse,\n    border: `${px2rem(3)} dotted ${base.slate700}`,\n  },\n  '&:active': {\n    [buttonStencil.vars.background]: base.slate700,\n    [buttonStencil.vars.label]: system.color.fg.inverse,\n    [systemIconStencil.vars.color]: system.color.fg.inverse,\n  },\n});\n\nconst customColors = {\n  default: {\n    background: base.amber100,\n    icon: base.amber500,\n    label: base.amber500,\n  },\n  focus: {\n    background: base.amber500,\n    boxShadowInner: base.amber100,\n    boxShadowOuter: base.amber500,\n  },\n  hover: {\n    background: base.amber400,\n    icon: system.color.fg.inverse,\n  },\n  active: {\n    background: base.amber500,\n  },\n  disabled: {},\n};\n\nexport const CustomStyles = () => (\n  <Grid cs={customContainer}>\n    <MyCustomButton icon={plusIcon}>Styling Override Via Stencil Variables</MyCustomButton>\n    <MyCustomButton icon={plusIcon} cs={myCustomStyles}>\n      Style Override Via Create Styles\n    </MyCustomButton>\n    <PrimaryButton icon={plusIcon} colors={customColors}>\n      Styling Override Via Colors Prop\n    </PrimaryButton>\n  </Grid>\n);\n```\n\n### Theme Overrides\n\nThe most common way to theme our buttons is to pass a `theme` object at the root level of the\napplication via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**`\ntokens with the fallback being `brand.primary.**`.\n\n> **Caution:** Setting `--cnvs-brand-action**` tokens at the `:root` CSS will override all\n> `PrimaryButton` theme colors set at the `CanvasProvider` level.\n\n> **Note:** You should **not** individually theme components wrapping them with the\n> `CanvasProvider`, but rather theme at the root level of the application.\n```tsx\nimport React from 'react';\n\nimport {PrimaryButton} from '@workday/canvas-kit-react/button';\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Heading} from '@workday/canvas-kit-react/text';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {\n  caretDownIcon,\n  plusIcon,\n  relatedActionsVerticalIcon,\n} from '@workday/canvas-system-icons-web';\nimport {brand, system} from '@workday/canvas-tokens-web';\n\nconst parentContainerStyles = createStyles({\n  gap: system.gap.md,\n  padding: system.padding.md,\n});\n\nconst customActionTheme = createStyles({\n  [brand.action.base]: 'teal',\n  [brand.action.accent]: 'white',\n  [brand.action.dark]: 'hsla(180, 100%, 20%)',\n  [brand.action.darkest]: 'hsla(180, 100%, 16%)',\n});\n\nexport const ThemeOverrides = () => (\n  <div>\n    <Heading size=\"medium\" as=\"h3\">\n      Override Primary Color Via Canvas Provider\n    </Heading>\n    <CanvasProvider\n      theme={{\n        canvas: {\n          palette: {\n            primary: {\n              main: 'navy',\n            },\n          },\n        },\n      }}\n    >\n      <Flex cs={parentContainerStyles}>\n        <PrimaryButton>Primary</PrimaryButton>\n        <PrimaryButton icon={plusIcon} iconPosition=\"start\">\n          Primary\n        </PrimaryButton>\n        <PrimaryButton icon={caretDownIcon} iconPosition=\"end\">\n          Primary\n        </PrimaryButton>\n        <PrimaryButton aria-label=\"Related Actions\" icon={relatedActionsVerticalIcon} />\n      </Flex>\n    </CanvasProvider>\n    <Heading size=\"medium\" as=\"h3\">\n      Override Action Color Via CSS Action Token\n    </Heading>\n    <div className={customActionTheme}>\n      <Flex cs={parentContainerStyles}>\n        <PrimaryButton>Primary</PrimaryButton>\n        <PrimaryButton icon={plusIcon} iconPosition=\"start\">\n          Primary\n        </PrimaryButton>\n        <PrimaryButton icon={caretDownIcon} iconPosition=\"end\">\n          Primary\n        </PrimaryButton>\n        <PrimaryButton aria-label=\"Related Actions\" icon={relatedActionsVerticalIcon} />\n      </Flex>\n    </div>\n  </div>\n);\n```\n\n## Accessibility\n\nThe primary accessibility goal is a visible, programmatically determinable name on a native control\nthat performs an in-page action (submit, open, dismiss, and similar). This page covers\n**`PrimaryButton`**, **`SecondaryButton`**, **`TertiaryButton`**, and **`DeleteButton`**. Use\n[Hyperlink](https://workday.github.io/canvas-kit/?path=/docs/components-hyperlink--docs) when the\ncontrol navigates to another URL or in-page location. For\n[Toolbar](https://workday.github.io/canvas-kit/?path=/docs/components-buttons-toolbar--docs)\nicon and dropdown controls, see that component\u2019s documentation. For a control that opens a menu,\ncompose [Menu](/components/popups/menu/) so **`Menu.Target`** wires popup state. When users choose\none value from **two or more** mutually exclusive options, use\n[Segmented Control](/components/buttons/segmented-control/) (`SegmentedControl.List` with multiple\n**`SegmentedControl.Item`** components)\u2014not a lone variant button.\n\nSee the [Button pattern (APG)](https://www.w3.org/WAI/ARIA/apg/patterns/button/) and Canvas Kit\n[Accessibility overview](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-overview--docs).\n\n### Minimum Accessible Structure\n\nThe following matches the [PrimaryButton](#primarybutton) examples: visible text for the default case,\ntext plus a decorative icon, and an icon-only control with an accessible name.\n\n```tsx\n\n<PrimaryButton>Save</PrimaryButton>;\n\n<PrimaryButton icon={plusIcon}>Add item</PrimaryButton>;\n\n<Tooltip title=\"Related Actions\">\n  <PrimaryButton icon={relatedActionsVerticalIcon} />\n</Tooltip>;\n```\n\nFor icon-only buttons, prefer **`Tooltip`** with **`title`** and default `type=\"label\"` (which sets\n**`aria-label`** from **`title`** so sighted users also see the label). If the spec explicitly says\nnot to use a tooltip, set **`aria-label`** on the button instead. The same patterns apply to\n**`SecondaryButton`**, **`TertiaryButton`**, and **`DeleteButton`**.\n\n### Built-in Behaviors\n\nCanvas Kit applies these automatically on **`PrimaryButton`**, **`SecondaryButton`**,\n**`TertiaryButton`**, and **`DeleteButton`**. **Do not duplicate them** in consuming code.\n\n**ARIA and DOM** (_applied by button components_):\n\n- **Variant buttons**: Render a native `<button type=\"button\">` (via **`BaseButton`**). Do not add\n  `role=\"button\"`.\n- **Visible label**: Button text is rendered in **`BaseButton.Label`** (`<span>`) inside the\n  `<button>` so its text contributes to the accessible name.\n- **`icon`**: Renders **`BaseButton.Icon`** (`SystemIcon`). Canvas Kit icon SVG markup uses\n  `role=\"presentation\"` and `focusable=\"false\"`, so icons beside visible text are not announced\n  separately.\n- **`disabled`**: Maps to the native `disabled` attribute; disabled buttons are skipped in the tab\n  order.\n- **Focus**: Visible focus styling uses `:focus-visible` (and a `.focus` class twin for visual\n  testing).\n- **`ref`**: Forwards to the underlying `<button>`.\n- **Native button attributes**: Standard props (for example `aria-label`, `aria-pressed`,\n  `aria-expanded`, `id`, `onClick`) pass through to the `<button>` unless you change the element with\n  **`as`**. Variant buttons do not set **`aria-pressed`** unless you pass it for a deliberate toggle\n  design.\n- **Menus**: Variant buttons do **not** set `aria-haspopup` or `aria-expanded`.\n  **`Menu.Target`** (and related Menu APIs) apply those when a menu is attached.\n\n**Keyboard** (_native `<button>` behavior_):\n\nVariant buttons use native button keyboard support: <kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd>\nfor focus order, and <kbd>Enter</kbd> or <kbd>Space</kbd> to activate. Do not replace the\n`<button>` with a non-focusable element or suppress activation keys.\n\n**Screen reader expectations** (_when built-in behaviors are used as intended_):\n\n- On focus, assistive technology announces the button name (visible text and/or `aria-label`) and\n  role (for example, \"Save, button\").\n- Icons rendered with **`icon`** next to visible text are not announced as separate images.\n- Disabled buttons are announced as unavailable and are not in the tab order.\n- When the button opens a menu through **`Menu`**, **`Menu.Target`** exposes popup and expanded\n  state; see [Menu accessibility](/components/popups/menu/#accessibility).\n\n### Accessibility Requirements\n\nRequired in application code for an accessible button. Rows marked _(conditional)_ apply only when the\nsituation matches\u2014otherwise omit.\n\n**If no design spec is provided:** use a **`PrimaryButton`** (or the variant that matches the design)\nwith non-empty visible text. Omit **`icon`**, **`disabled`**, **`Tooltip`**, **`aria-label`**, custom\n**`id`**, **`as`**, and a **`ref`** unless the spec requires them.\n\n| Requirement                            | How to satisfy                                                                                                                                                                                                                                                                 |\n| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| Accessible name                        | Non-empty visible text inside the variant button                                                                                                                                                                                                                               |\n| Icon-only name _(conditional)_         | **`Tooltip`** with `type=\"label\"` and **`title`** (preferred; see [PrimaryButton](#primarybutton)), or **`aria-label`** when the spec explicitly says not to use a tooltip. Do not use `type=\"muted\"` on **`Tooltip`**\u2014it does not set an accessible name                      |\n| Variant choice                         | **`PrimaryButton`**, **`SecondaryButton`**, **`TertiaryButton`**, or **`DeleteButton`** per design; **`DeleteButton`** only for destructive actions                                                                                                                            |\n| Decorative icon _(conditional)_        | **`icon`** with visible text\u2014no extra ARIA on the icon; meaning comes from button text                                                                                                                                                                                         |\n| Mutually exclusive group _(conditional)_ | [Segmented Control](/components/buttons/segmented-control/) with two or more **`SegmentedControl.Item`** siblings and **`aria-label`** on **`SegmentedControl.List`**\u2014not for a single button or lone on/off control                                                         |\n| Toggle pressed state _(conditional)_   | **`aria-pressed`** on a variant button for a standalone on/off control, or [Toolbar](https://workday.github.io/canvas-kit/?path=/docs/components-buttons-toolbar--docs) per toolbar specs\u2014not for one-shot actions (Save, Delete, Open)                                       |\n| Menu trigger _(conditional)_           | **`Menu`** + **`Menu.Target`** (or **`Menu.ContextTarget`**) as the button\u2014do not hand-wire `aria-haspopup` / `aria-expanded` without the Menu model; see [Menu accessibility](/components/popups/menu/#accessibility)                                                       |\n| Related button groups _(conditional)_  | Semantic grouping (`<ul>` / `<li>` or `<fieldset>` / `<legend>`) when several buttons share one question or legend; each control still needs its own accessible name                                                                                                            |\n| Disabled _(conditional)_               | Native **`disabled`** on the variant button when the spec marks the action unavailable                                                                                                                                                                                       |\n| Navigation _(conditional)_           | [Hyperlink](https://workday.github.io/canvas-kit/?path=/docs/components-hyperlink--docs) instead of a variant button when the action is navigation                                                                                                                             |\n| Programmatic focus _(conditional)_     | `ref` on the variant button and `focus()` only when the product must move focus after an action\u2014omit by default                                                                                                                                                                |\n\n**Summary for code generation:**\n\n- **REQUIRED:** variant button with a non-empty accessible name (visible text for text buttons; for\n  icon-only, **`Tooltip`** with `type=\"label\"` preferred, or **`aria-label`** when the spec says not\n  to use a tooltip)\n- **CONDITIONAL:** **`icon`**; icon-only naming; **`disabled`**; **`aria-pressed`** for toggle\n  specs; **`Menu`** for menus; **`Hyperlink`** for navigation; grouping markup; programmatic focus\n  via `ref`\n\n### Anti-Patterns\n\nDo **not** generate code that does the following (see **Accessibility Requirements** above for what\nto supply instead):\n\n- Use a `<div>` or `<span>` with `onClick` instead of a variant button\u2014use **`PrimaryButton`**, **`SecondaryButton`**, **`TertiaryButton`**, or **`DeleteButton`** so keyboard and assistive technology get native `<button>` behavior\n- Add `role=\"button\"` on variant buttons\u2014the control is already a `<button>`\n- Use a variant button (or `type=\"submit\"` without an intentional form action) for URL\n  navigation\u2014use\n  [Hyperlink](https://workday.github.io/canvas-kit/?path=/docs/components-hyperlink--docs)\n- Leave icon-only buttons without a name\u2014prefer **`Tooltip`** with `type=\"label\"`, or\n  **`aria-label`** when the spec says not to use a tooltip; do not rely on the icon graphic alone\n- Use **`Tooltip`** with `type=\"muted\"` on icon-only buttons\u2014muted tooltips do not set an accessible\n  name\n- Use **`aria-label`** on icon-only buttons when the spec allows tooltips\u2014prefer **`Tooltip`** with\n  `type=\"label\"` unless the spec explicitly says not to use a tooltip\n- Set `aria-haspopup` or `aria-expanded` on a variant button without **`Menu`**\u2014use\n  **`Menu.Target`** so open state stays in sync with the menu model\n- Set **`aria-pressed`** on one-shot actions (Save, Delete, Open)\u2014see **Toggle pressed state** in the\n  requirements table\n- Use **`SegmentedControl`** for a single option or a lone on/off control\u2014see **Mutually exclusive\n  group** in the requirements table\n- Add `aria-hidden` or change the **`role`** on **`icon`** when visible button text already conveys\n  meaning\u2014Canvas Kit icons are presentational.\n- Use **`aria-disabled`** instead of **`disabled`**\u2014variant buttons map unavailability to the\n  native **`disabled`** attribute\n- Duplicate menu ARIA that **`Menu.Target`** already applies\n\n## Component API\n\n## Specifications\n\n",
+      accessibilityProse: '## Accessibility\n\nThe primary accessibility goal is a visible, programmatically determinable name on a native control\nthat performs an in-page action (submit, open, dismiss, and similar). This page covers\n**`PrimaryButton`**, **`SecondaryButton`**, **`TertiaryButton`**, and **`DeleteButton`**. Use\n[Hyperlink](https://workday.github.io/canvas-kit/?path=/docs/components-hyperlink--docs) when the\ncontrol navigates to another URL or in-page location. For\n[Toolbar](https://workday.github.io/canvas-kit/?path=/docs/components-buttons-toolbar--docs)\nicon and dropdown controls, see that component\u2019s documentation. For a control that opens a menu,\ncompose [Menu](/components/popups/menu/) so **`Menu.Target`** wires popup state. When users choose\none value from **two or more** mutually exclusive options, use\n[Segmented Control](/components/buttons/segmented-control/) (`SegmentedControl.List` with multiple\n**`SegmentedControl.Item`** components)\u2014not a lone variant button.\n\nSee the [Button pattern (APG)](https://www.w3.org/WAI/ARIA/apg/patterns/button/) and Canvas Kit\n[Accessibility overview](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-overview--docs).\n\n### Minimum Accessible Structure\n\nThe following matches the [PrimaryButton](#primarybutton) examples: visible text for the default case,\ntext plus a decorative icon, and an icon-only control with an accessible name.\n\n```tsx\n\n<PrimaryButton>Save</PrimaryButton>;\n\n<PrimaryButton icon={plusIcon}>Add item</PrimaryButton>;\n\n<Tooltip title="Related Actions">\n  <PrimaryButton icon={relatedActionsVerticalIcon} />\n</Tooltip>;\n```\n\nFor icon-only buttons, prefer **`Tooltip`** with **`title`** and default `type="label"` (which sets\n**`aria-label`** from **`title`** so sighted users also see the label). If the spec explicitly says\nnot to use a tooltip, set **`aria-label`** on the button instead. The same patterns apply to\n**`SecondaryButton`**, **`TertiaryButton`**, and **`DeleteButton`**.\n\n### Built-in Behaviors\n\nCanvas Kit applies these automatically on **`PrimaryButton`**, **`SecondaryButton`**,\n**`TertiaryButton`**, and **`DeleteButton`**. **Do not duplicate them** in consuming code.\n\n**ARIA and DOM** (_applied by button components_):\n\n- **Variant buttons**: Render a native `<button type="button">` (via **`BaseButton`**). Do not add\n  `role="button"`.\n- **Visible label**: Button text is rendered in **`BaseButton.Label`** (`<span>`) inside the\n  `<button>` so its text contributes to the accessible name.\n- **`icon`**: Renders **`BaseButton.Icon`** (`SystemIcon`). Canvas Kit icon SVG markup uses\n  `role="presentation"` and `focusable="false"`, so icons beside visible text are not announced\n  separately.\n- **`disabled`**: Maps to the native `disabled` attribute; disabled buttons are skipped in the tab\n  order.\n- **Focus**: Visible focus styling uses `:focus-visible` (and a `.focus` class twin for visual\n  testing).\n- **`ref`**: Forwards to the underlying `<button>`.\n- **Native button attributes**: Standard props (for example `aria-label`, `aria-pressed`,\n  `aria-expanded`, `id`, `onClick`) pass through to the `<button>` unless you change the element with\n  **`as`**. Variant buttons do not set **`aria-pressed`** unless you pass it for a deliberate toggle\n  design.\n- **Menus**: Variant buttons do **not** set `aria-haspopup` or `aria-expanded`.\n  **`Menu.Target`** (and related Menu APIs) apply those when a menu is attached.\n\n**Keyboard** (_native `<button>` behavior_):\n\nVariant buttons use native button keyboard support: <kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd>\nfor focus order, and <kbd>Enter</kbd> or <kbd>Space</kbd> to activate. Do not replace the\n`<button>` with a non-focusable element or suppress activation keys.\n\n**Screen reader expectations** (_when built-in behaviors are used as intended_):\n\n- On focus, assistive technology announces the button name (visible text and/or `aria-label`) and\n  role (for example, "Save, button").\n- Icons rendered with **`icon`** next to visible text are not announced as separate images.\n- Disabled buttons are announced as unavailable and are not in the tab order.\n- When the button opens a menu through **`Menu`**, **`Menu.Target`** exposes popup and expanded\n  state; see [Menu accessibility](/components/popups/menu/#accessibility).\n\n### Accessibility Requirements\n\nRequired in application code for an accessible button. Rows marked _(conditional)_ apply only when the\nsituation matches\u2014otherwise omit.\n\n**If no design spec is provided:** use a **`PrimaryButton`** (or the variant that matches the design)\nwith non-empty visible text. Omit **`icon`**, **`disabled`**, **`Tooltip`**, **`aria-label`**, custom\n**`id`**, **`as`**, and a **`ref`** unless the spec requires them.\n\n| Requirement                            | How to satisfy                                                                                                                                                                                                                                                                 |\n| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| Accessible name                        | Non-empty visible text inside the variant button                                                                                                                                                                                                                               |\n| Icon-only name _(conditional)_         | **`Tooltip`** with `type="label"` and **`title`** (preferred; see [PrimaryButton](#primarybutton)), or **`aria-label`** when the spec explicitly says not to use a tooltip. Do not use `type="muted"` on **`Tooltip`**\u2014it does not set an accessible name                      |\n| Variant choice                         | **`PrimaryButton`**, **`SecondaryButton`**, **`TertiaryButton`**, or **`DeleteButton`** per design; **`DeleteButton`** only for destructive actions                                                                                                                            |\n| Decorative icon _(conditional)_        | **`icon`** with visible text\u2014no extra ARIA on the icon; meaning comes from button text                                                                                                                                                                                         |\n| Mutually exclusive group _(conditional)_ | [Segmented Control](/components/buttons/segmented-control/) with two or more **`SegmentedControl.Item`** siblings and **`aria-label`** on **`SegmentedControl.List`**\u2014not for a single button or lone on/off control                                                         |\n| Toggle pressed state _(conditional)_   | **`aria-pressed`** on a variant button for a standalone on/off control, or [Toolbar](https://workday.github.io/canvas-kit/?path=/docs/components-buttons-toolbar--docs) per toolbar specs\u2014not for one-shot actions (Save, Delete, Open)                                       |\n| Menu trigger _(conditional)_           | **`Menu`** + **`Menu.Target`** (or **`Menu.ContextTarget`**) as the button\u2014do not hand-wire `aria-haspopup` / `aria-expanded` without the Menu model; see [Menu accessibility](/components/popups/menu/#accessibility)                                                       |\n| Related button groups _(conditional)_  | Semantic grouping (`<ul>` / `<li>` or `<fieldset>` / `<legend>`) when several buttons share one question or legend; each control still needs its own accessible name                                                                                                            |\n| Disabled _(conditional)_               | Native **`disabled`** on the variant button when the spec marks the action unavailable                                                                                                                                                                                       |\n| Navigation _(conditional)_           | [Hyperlink](https://workday.github.io/canvas-kit/?path=/docs/components-hyperlink--docs) instead of a variant button when the action is navigation                                                                                                                             |\n| Programmatic focus _(conditional)_     | `ref` on the variant button and `focus()` only when the product must move focus after an action\u2014omit by default                                                                                                                                                                |\n\n**Summary for code generation:**\n\n- **REQUIRED:** variant button with a non-empty accessible name (visible text for text buttons; for\n  icon-only, **`Tooltip`** with `type="label"` preferred, or **`aria-label`** when the spec says not\n  to use a tooltip)\n- **CONDITIONAL:** **`icon`**; icon-only naming; **`disabled`**; **`aria-pressed`** for toggle\n  specs; **`Menu`** for menus; **`Hyperlink`** for navigation; grouping markup; programmatic focus\n  via `ref`\n\n### Anti-Patterns\n\nDo **not** generate code that does the following (see **Accessibility Requirements** above for what\nto supply instead):\n\n- Use a `<div>` or `<span>` with `onClick` instead of a variant button\u2014use **`PrimaryButton`**, **`SecondaryButton`**, **`TertiaryButton`**, or **`DeleteButton`** so keyboard and assistive technology get native `<button>` behavior\n- Add `role="button"` on variant buttons\u2014the control is already a `<button>`\n- Use a variant button (or `type="submit"` without an intentional form action) for URL\n  navigation\u2014use\n  [Hyperlink](https://workday.github.io/canvas-kit/?path=/docs/components-hyperlink--docs)\n- Leave icon-only buttons without a name\u2014prefer **`Tooltip`** with `type="label"`, or\n  **`aria-label`** when the spec says not to use a tooltip; do not rely on the icon graphic alone\n- Use **`Tooltip`** with `type="muted"` on icon-only buttons\u2014muted tooltips do not set an accessible\n  name\n- Use **`aria-label`** on icon-only buttons when the spec allows tooltips\u2014prefer **`Tooltip`** with\n  `type="label"` unless the spec explicitly says not to use a tooltip\n- Set `aria-haspopup` or `aria-expanded` on a variant button without **`Menu`**\u2014use\n  **`Menu.Target`** so open state stays in sync with the menu model\n- Set **`aria-pressed`** on one-shot actions (Save, Delete, Open)\u2014see **Toggle pressed state** in the\n  requirements table\n- Use **`SegmentedControl`** for a single option or a lone on/off control\u2014see **Mutually exclusive\n  group** in the requirements table\n- Add `aria-hidden` or change the **`role`** on **`icon`** when visible button text already conveys\n  meaning\u2014Canvas Kit icons are presentational.\n- Use **`aria-disabled`** instead of **`disabled`**\u2014variant buttons map unavailability to the\n  native **`disabled`** attribute\n- Duplicate menu ARIA that **`Menu.Target`** already applies'
     }
   }
 };