Common Examples
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 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.
- 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.import { Toolbar } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<Toolbar
associatedContent="document editor"
direction="horizontal"
overflow="wrap"
additionalItems={[]}
>
{/* Toolbar content */}
</Toolbar>
);
}
Denotes what content the toolbar is associated width so that it can properly
populate the aria-label.
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,
andToolbar.Select. Note: This menu also gets the items that get moved due
to size constraints when the overflow is set to collapse.
direction
"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
overflow
"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.
import { Toolbar } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<Toolbar.Button
appearance="ghost"
icon={Icon}
aria-label="Button label"
onClick={() => {}}
/>
); }
Toolbar.Button component can accept any of the Button 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.onClick
(e: MouseEvent) => void
required
Callback when the button is clicked.
appearance
"ghost" | "primary"
default:"ghost"
import { Toolbar } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<Toolbar.ButtonLink
appearance="ghost"
href="/example"
>
Link Text
</Toolbar.ButtonLink>
);
}
Toolbar.ButtonLink component can accept any of the ButtonLink props with the exception of appearance, which is custom for this component.appearance
"ghost" | "primary"
default:"ghost"
import { Toolbar } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<Toolbar.ButtonToggle aria-label="Toggle label" defaultChecked={false}>
Toggle
</Toolbar.ButtonToggle>
); }
Toolbar.ButtonToggle component can accept any of the A2 ButtonToggle 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.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 is comprised of an A2 Popover with an A2 Listbox for its dropdown.In addition to the props listed below, the Toolbar.Select can accept any of the A2 Popover Button props with the exceptions of appearance and onChange, which are custom for this component.Label for the select that gets appended to aria tag for the select menu.
Example: “State” becomes “State Options” for the select list label.
appearance
"ghost" | "primary"
default:"ghost"
items
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.
onChange
(optionId: string) => void
Sets the selected item to your select as well as triggers any further onChange
you pass to the component.
selected
string
default:"first item id"
By default the first item in the items array is set to the selected item.
Last modified on January 23, 2026
