> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Toolbar – Code

> Toolbars are containers for grouping a set of controls, such as buttons, menubuttons, or checkboxes.

export const LiveCode = ({children, customHeight, clickToLoad, example, fullWidth, fullHeight, hideCodeInLiveCode, screenshot, screenshotOnly, showCode: showCodeProp}) => {
  const SCREENSHOTS_BASE = "https://servicetitan.github.io/anvil2-docs-live-code/screenshots";
  const STACKBLITZ_BASE = "https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples";
  const [showCodeBlock, setShowCodeBlock] = useState(showCodeProp ?? false);
  const [isLocalOverride, setIsLocalOverride] = useState(false);
  useEffect(() => {
    const examplePath = `/images/live-code-screenshots-tmp/${example}.png`;
    fetch(examplePath, {
      method: "HEAD"
    }).then(r => {
      if (r.ok) setIsLocalOverride(true);
    }).catch(() => {});
  }, [example]);
  const screenshotBase = isLocalOverride ? "/images/live-code-screenshots-tmp" : SCREENSHOTS_BASE;
  if (screenshotOnly) {
    return <Frame className="flex flex-col">
        <div className="flex dark:hidden" style={{
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined,
      background: "#FFFFFF"
    }}>
          <img srcset={`${screenshotBase}/${example}.png, ${screenshotBase}/${example}-2x.png 2x`} src={`${screenshotBase}/${example}.png`} alt={example} noZoom />
        </div>
        <div className="hidden dark:flex" style={{
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined,
      background: "#141414"
    }}>
          <img srcset={`${screenshotBase}/${example}-dark.png, ${screenshotBase}/${example}-dark-2x.png 2x`} src={`${screenshotBase}/${example}-dark.png`} alt={example} noZoom />
        </div>
      </Frame>;
  }
  if (screenshot) {
    return <Frame className="flex flex-col -mb-2">
        <div className="flex dark:hidden bg-white dark:bg-codeblock border border-gray-950/10 dark:border-white/10 dark:twoslash-dark rounded-2xl overflow-hidden" style={{
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined
    }}>
          <img srcset={`${screenshotBase}/${example}.png, ${screenshotBase}/${example}-2x.png 2x`} src={`${screenshotBase}/${example}.png`} alt={example} noZoom />
        </div>

        <div className="hidden dark:flex bg-white dark:bg-codeblock border border-gray-950/10 dark:border-white/10 dark:twoslash-dark rounded-2xl overflow-hidden" style={{
      background: "#141414",
      justifyContent: "center",
      alignItems: "center",
      width: fullWidth ? "100%" : "50%",
      minHeight: fullHeight ? "284px" : undefined
    }}>
          <img srcset={`${screenshotBase}/${example}-dark.png, ${screenshotBase}/${example}-dark-2x.png 2x`} src={`${screenshotBase}/${example}-dark.png`} alt={example} noZoom />
        </div>

        <div className="flex justify-end items-center text-xs py-2 px-1 gap-4">
          {!showCodeProp ? <button className="inline-flex justify-end items-center text-gray-700 dark:text-gray-50 hover:text-blue-500 dark:hover:text-blue-300 transition-colors group self-end gap-1 cursor-pointer" onClick={() => setShowCodeBlock(!showCodeBlock)} style={{
      appearance: "none"
    }}>
              <Icon icon="code" size="12px" className="group-hover:bg-blue-500 dark:group-hover:bg-blue-300" />
              <span>{showCodeBlock ? "Hide code" : "Show code"}</span>
            </button> : null}

          <a className="inline-flex justify-end items-center hover:text-blue-500 dark:hover:text-blue-300 transition-colors group self-end gap-1" href={`${STACKBLITZ_BASE}/${example}?file=src/App.tsx`} target="_blank" rel="noreferrer">
            <Icon icon="bolt" size="12px" className="group-hover:bg-blue-500 dark:group-hover:bg-blue-300" />
            <span>StackBlitz demo</span>
          </a>
        </div>

        <div className="grid transition-[grid-template-rows] duration-300 ease-in-out overflow-auto overflow-y-hidden overflow-x-auto" style={showCodeBlock ? {
      gridTemplateRows: "1fr"
    } : {
      gridTemplateRows: "0fr"
    }}>
          <div style={{
      minHeight: 0,
      overflowX: "auto",
      overflowY: "hidden",
      marginBlockStart: "-1.25rem",
      marginBlockEnd: "-1.5rem"
    }}>
            {children}
          </div>
        </div>
      </Frame>;
  } else {
    return <div style={{
      display: "flex",
      width: fullWidth ? "100%" : "50%",
      minHeight: customHeight ? customHeight : "316px",
      resize: "vertical",
      overflow: "auto"
    }}>
        <iframe title={example} style={{
      flex: 1,
      width: fullWidth ? "100%" : "50%",
      minHeight: customHeight ? customHeight : "316px"
    }} src={`${STACKBLITZ_BASE}/${example}?embed=1&hideNavigation=1&hideExplorer=1&terminalHeight=0&file=src/App.tsx${clickToLoad ? "&ctl=1" : ""}${hideCodeInLiveCode ? "&view=preview" : ""}`} allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" />
      </div>;
  }
};

<Tabs>
  <Tab title="Implementation">
    <LiveCode showCode example="toolbar-playground" fullWidth screenshot>
      ```tsx lines expandable theme={null}
      import { Toolbar } from "@servicetitan/anvil2";
      import Edit from "@servicetitan/anvil2/assets/icons/material/round/edit.svg";
      import Warning from "@servicetitan/anvil2/assets/icons/material/round/warning.svg";

      function App() {
        const selectItems = [
          { id: "status1", label: "Active" },
          { id: "status2", label: "Pending" },
          { id: "status3", label: "Completed" },
          { id: "status4", label: "Cancelled", disabled: true },
        ];

        const additionalItems = [
          <Toolbar.Button key="1" onClick={console.log}>
            Additional Action 1
          </Toolbar.Button>,
          <Toolbar.Button key="2" onClick={console.log}>
            Additional Action 2
          </Toolbar.Button>,
        ];

        return (
          <div>
            <Toolbar
              associatedContent="playground toolbar"
              additionalItems={additionalItems}
              overflow="collapse"
            >
              <Toolbar.Button
                icon={Edit}
                onClick={console.log}
                aria-label="Edit option"
              />

              <Toolbar.ButtonToggle onClick={console.log}>Bold</Toolbar.ButtonToggle>

              <Toolbar.ButtonLink
                href="https://anvil.servicetitan.com/"
                target="_blank"
                icon={{ before: Warning }}
                appearance="primary"
              >
                View Report
              </Toolbar.ButtonLink>

              <Toolbar.Select
                accessibleLabel="Status"
                items={selectItems}
                onChange={console.log}
              />
            </Toolbar>
          </div>
        );
      }

      export default App;
      ```
    </LiveCode>

    ## Common Examples

    ```tsx theme={null}
    import {Toolbar} from "@servicetitan/anvil2";

    function ExampleComponent() {
      const selectItems = [
          ...
        ];

      const additionalItems = [
        ...
      ];

      return (
        <Toolbar
          associatedContent="..."
          additionalItems={additionalItems}
          overflow="collapse">
            <Toolbar.Button
              icon={...}
              onClick={...}
              aria-label="..."
            />

            <Toolbar.ButtonToggle
              onClick={...}>
              ...
            </Toolbar.ButtonToggle>

            <Toolbar.ButtonLink
              href={...}>
               ...
            </Toolbar.ButtonLink>

            <Toolbar.Select
              accessibleLabel="..."
              items={selectItems}
              onChange={...} />
        </Toolbar>
      )
    }
    ```

    ### Toolbar Components

    The Anvil2 toolbar is made up a main `Toolbar` component and a few sub-components that can be used together to build simple or complex bars.

    * `Toolbar`: The parent component to configure toolbars.
    * `Toolbar.Button`: Used to create simple actions that need to be triggered via a button such as opening up a dialog.
    * `Toolbar.ButtonToggle`: Used to create simple actions that rely on a boolean response such as text font styles for a rich text editor.
    * `Toolbar.ButtonLink`: Used to create links to other sources such as download links.
    * `Toolbar.Select`: Used to create a single select drop down for items such as heading size selection for a rich text editor.

    The components above should be the only items used within a toolbar to ensure look, feel, and overflow interactions remain consistent.

    ## React Accessibility

    * Keyboard interaction and aria guideline to follow [WCAG Toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/).
    * For controls that have the option to be icon only in view, aria-labels are required.
    * The `Toolbar` component has a required prop of `associatedContent` to properly populate an `aria-label` for the component itself.
    * `Toolbar.Select` has an `accessibleLabel` prop to properly link the list of select items to the trigger.

    For more guidance on form field labels and context, see [input field context association best practices](/docs/accessibility/labels-and-ctas#input-field-context-association).
  </Tab>

  <Tab title="Toolbar Props">
    ```tsx theme={null}
    import { Toolbar } from "@servicetitan/anvil2";

    function ExampleComponent() {
      return (
        <Toolbar
          associatedContent="document editor"
          direction="horizontal"
          overflow="wrap"
          size="xsmall"
          additionalItems={[]}
        >
          {/* Toolbar content */}
        </Toolbar>
      );
    }
    ```

    ## `Toolbar` Props

    <ParamField path="associatedContent" type="string" required>
      Denotes what content the toolbar is associated with so that it can properly
      populate the aria-label.
    </ParamField>

    <ParamField path="additionalItems" type="ReactElement[]">
      Secondary actions that will be put in a menu at the end of the toolbar. While
      the type for this is a generic ReactElement, it is recommended that additional
      items only be `Toolbar.Button`, `Toolbar.ButtonLink`, `Toolbar.ButtonToggle`,
      and `Toolbar.Select`. **Note:** This menu also gets the items that get moved due
      to size constraints when the overflow is set to collapse.
    </ParamField>

    <ParamField path="direction" type={`"horizontal" | "vertical"`} default="horizontal">
      Determines the direction the toolbar flows.

      Note: The direction determines which arrow keys are used for navigating through the toolbar via keyboard actions.
    </ParamField>

    <ParamField path="overflow" type={`"wrap" | "collapse"`} default="wrap">
      Determines if the toolbar controls will wrap to a new line when they run out
      of space or if they will be added to an overflow menu that gets appended to
      the end of the toolbar.
    </ParamField>

    <ParamField path="size" type={`"xsmall" | "small" | "medium" | "large"`} default="xsmall">
      Controls the size of all toolbar child components. The size propagates to
      all `Toolbar.Button`, `Toolbar.ButtonToggle`, `Toolbar.ButtonLink`, and
      `Toolbar.Select` items via context.
    </ParamField>
  </Tab>

  <Tab title="Toolbar.Button Props">
    ```tsx theme={null}
    import { Toolbar } from "@servicetitan/anvil2";

    function ExampleComponent() {
    return (

    <Toolbar.Button
      appearance="ghost"
      icon={Icon}
      aria-label="Button label"
      onClick={() => {}}
    />
    ); }

    ```

    ## `Toolbar.Button` Props

    In addition to the props listed below, the `Toolbar.Button` component can accept any of the [Button](/docs/web/components/button/code) props with the exception of `appearance`, which is custom for this component.

    For accessibility compliance, if the button is icon-only, an `aria-label` becomes a required prop.

    <ParamField path="onClick" type="(e: MouseEvent) => void" required>
      Callback when the button is clicked.
    </ParamField>

    <ParamField path="appearance" type={`"ghost" | "primary"`} default="ghost" />
  </Tab>

  <Tab title="Toolbar.ButtonLink Props">
    ```tsx theme={null}
    import { Toolbar } from "@servicetitan/anvil2";

    function ExampleComponent() {
      return (
        <Toolbar.ButtonLink
          appearance="ghost"
          href="/example"
        >
          Link Text
        </Toolbar.ButtonLink>
      );
    }
    ```

    ## `Toolbar.ButtonLink` Props

    In addition to the props listed below, the `Toolbar.ButtonLink` component can accept any of the [ButtonLink](/docs/web/components/button/code) props with the exception of `appearance`, which is custom for this component.

    <ParamField path="appearance" type={`"ghost" | "primary"`} default="ghost" />
  </Tab>

  <Tab title="Toolbar.ButtonToggle Props">
    ```tsx theme={null}
    import { Toolbar } from "@servicetitan/anvil2";

    function ExampleComponent() {
    return (

    <Toolbar.ButtonToggle aria-label="Toggle label" defaultChecked={false}>
      Toggle
    </Toolbar.ButtonToggle>
    ); }

    ```

    ## `Toolbar.ButtonToggle` Props

    The `Toolbar.ButtonToggle` component can accept any of the [A2 ButtonToggle](/docs/web/components/button-toggle/code) props, as well as any other HTML `button` props.

    `Toolbar.ButtonToggle` can be either controlled or uncontrolled.

    For accessibility compliance, if the button toggle is an icon only button an `aria-label` becomes a required prop.
  </Tab>

  <Tab title="Toolbar.Select Props">
    ```tsx theme={null}
    import { Toolbar } from "@servicetitan/anvil2";

    function ExampleComponent() {
      return (
        <Toolbar.Select
          accessibleLabel="Select label"
          items={items}
          selected="item-1"
          appearance="ghost"
          onChange={(id) => console.log(id)}
        />
      );
    }
    ```

    ## `Toolbar.Select` Props

    The `Toolbar.Select` is comprised of an [A2 Popover](/docs/web/components/popover) with an [A2 Listbox](/docs/web/components/listbox) for its dropdown.

    In addition to the props listed below, the `Toolbar.Select` can accept any of the [A2 Popover Button](/docs/web/components/popover/code) props with the exceptions of appearance and onChange, which are custom for this component.

    <ParamField path="accessibleLabel" type="string">
      Label for the select that gets appended to aria tag for the select menu.
      Example: "State" becomes "State Options" for the select list label.
    </ParamField>

    <ParamField path="appearance" type={`"ghost" | "primary"`} default="ghost" />

    <ParamField path="items" type="ItemType & { id: string }[]">
      The options for the single select. The label is what will be visible in the
      option and in the select trigger upon selection.
    </ParamField>

    <ParamField path="onChange" type="(optionId: string) => void">
      Sets the selected item to your select as well as triggers any further onChange
      you pass to the component.
    </ParamField>

    <ParamField path="selected" type="string" default="first item id">
      By default the first item in the items array is set to the selected item.
    </ParamField>
  </Tab>
</Tabs>