# @leafygreen-ui/toolbar
> LeafyGreen UI Kit Toolbar
Latest version **1.3.3** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads
## Install
```sh
npm install @leafygreen-ui/toolbar
pnpm add @leafygreen-ui/toolbar
yarn add @leafygreen-ui/toolbar
bun add @leafygreen-ui/toolbar
```
## Health
**Score 70/100 (B)** — status: active.
Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 1.3.3 |
| Published | 2026-10-02 |
| First published | 2025-06-16 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 222.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 274 |
| Maintainers | thesonofthomp, shaneeza, stephl3, aitchpgm, hnevins, _tsck |
## Links
- npm: https://www.npmjs.com/package/@leafygreen-ui/toolbar
- Repository: https://github.com/mongodb/leafygreen-ui
- Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/toolbar
- Issues: https://jira.mongodb.org/projects/LG/summary
- npm.io page: https://npm.io/package/@leafygreen-ui/toolbar
## Dependencies (11)
- [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.1
- [@leafygreen-ui/icon](https://npm.io/package/@leafygreen-ui/icon.md) ^14.9.1
- [@leafygreen-ui/hooks](https://npm.io/package/@leafygreen-ui/hooks.md) ^9.3.2
- [@lg-chat/chat-button](https://npm.io/package/@lg-chat/chat-button.md) ^0.2.3
- [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.3
- [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.1
- [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.3
- [@leafygreen-ui/tooltip](https://npm.io/package/@leafygreen-ui/tooltip.md) ^14.3.3
- [@lg-tools/test-harnesses](https://npm.io/package/@lg-tools/test-harnesses.md) ^0.3.5
- [@leafygreen-ui/descendants](https://npm.io/package/@leafygreen-ui/descendants.md) ^3.1.2
- [@leafygreen-ui/icon-button](https://npm.io/package/@leafygreen-ui/icon-button.md) ^17.1.6
## Recent versions
- 1.3.3 (latest) — 2026-10-02
- 1.3.2 — 2026-01-22
- 1.3.1 — 2026-01-21
- 1.3.0 — 2025-12-23
- 1.2.0 — 2025-11-24
- 1.1.3 — 2025-11-13
- 1.1.2 — 2025-10-31
- 1.1.1 — 2025-10-21
- 1.1.0 — 2025-09-29
- 1.0.6 — 2025-09-25
- 1.0.5 — 2025-09-10
- 1.0.4 — 2025-09-03
- 1.0.3 — 2025-08-05
- 1.0.2 — 2025-07-03
- 1.0.1 — 2025-06-30
- … 1 more at https://npm.io/package/@leafygreen-ui/toolbar/versions
## README
# Toolbar
#### [View on MongoDB.design](https://www.mongodb.design/component/toolbar/live-example/)
## Installation
### PNPM
```shell
pnpm add @leafygreen-ui/toolbar
```
### Yarn
```shell
yarn add @leafygreen-ui/toolbar
```
### NPM
```shell
npm install @leafygreen-ui/toolbar
```
## Example
```js
import {Toolbar, ToolbarIconButton} from `@leafygreen-ui/toolbar`;
```
### Toolbar
#### Props
| Prop | Type | Description | Default |
| ----------- | -------------- | ---------------------------------------------------- | ------------ |
| `darkMode` | `boolean` | Determines if the component will render in dark mode | `false` |
| `data-lgid` | `lg-${string}` | Custom testid to pass to getTestUtils | `lg-toolbar` |
\+ other HTML `div` element props
### ToolbarIconButton
#### Props
| Prop | Type | Description | Default |
| ------------------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| `glyph` | `Glyph` | Name of the icon glyph to display in the button. List of available glyphs can be found in the [Icon README](https://github.com/mongodb/leafygreen-ui/blob/main/packages/icon/README.md#properties). | |
| `label` | `React.ReactNode` | Text that appears in the tooltip on hover/focus | |
| `isTooltipEnabled` _(optional)_ | `boolean` | Enables the tooltip to trigger based on hover events. When false, the tooltip will not show on hover. Useful when other overlays (like `GuideCue`) are positioned on the button. | `true` |
\+ Extends LG [IconButton props](https://github.com/mongodb/leafygreen-ui/tree/main/packages/icon-button#properties) with the exception of `as`, `children`, `darkMode`, `href`, `size`, and `tabIndex`
# Test Harnesses
## getTestUtils()
`getTestUtils()` is a util that allows consumers to reliably interact with LG `Toolbar` in a product test suite. If the `Toolbar` component cannot be found, an error will be thrown.
### Usage
```tsx
import { getTestUtils } from '@leafygreen-ui/toolbar/testing';
const utils = getTestUtils(lgId?: string); // lgId refers to the custom `data-lgid` attribute passed to `Toolbar`. It defaults to 'lg-toolbar' if left empty.
```
#### Single `Toolbar` component
```tsx
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Toolbar, ToolbarIconButton } from '@leafygreen-ui/toolbar';
import { getTestUtils } from '@leafygreen-ui/toolbar/testing';
...
test('Toolbar', () => {
render(
);
const {
findToolbar,
getToolbar,
queryToolbar,
getAllToolbarIconButtons,
getToolbarIconButtonByLabel,
getActiveToolbarIconButton
} = getTestUtils();
expect(await findToolbar()).toBeInTheDocument();
expect(getToolbar()).toBeInTheDocument();
expect(queryToolbar()).toBeInTheDocument();
expect(getAllToolbarIconButtons().length).toBe(3);
expect(getToolbarIconButtonByLabel('Code')?.getElement()).toBeInTheDocument();
expect(getActiveToolbarIconButton()).toHaveAttribute('aria-label','Code');
});
```
#### Multiple `Toolbar` components
When testing multiple `Toolbar` components, it is recommended to add the custom `data-lgid` attribute to each `Toolbar`.
```tsx
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Toolbar, ToolbarIconButton } from '@leafygreen-ui/toolbar';
import { getTestUtils } from '@leafygreen-ui/toolbar/testing';
...
test('Toolbar', () => {
render(
<>
);
const testUtils1 = getTestUtils('lg-toolbar-abc');
const testUtils2 = getTestUtils('lg-toolbar-xy');
// First Toolbar
expect(testUtils1.getAllToolbarIconButtons().length).toBe(2);
// Second Toolbar
expect(testUtils2.getAllToolbarIconButtons().length).toBe(3);
});
```
### Test Utils
```tsx
const {
findToolbar,
getToolbar,
queryToolbar,
getAllToolbarIconButtons,
getToolbarIconButtonByLabel,
getActiveToolbarIconButton,
} = getTestUtils();
```
| Util | Description | Returns |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
| `findToolbar()` | Returns a promise that resolves to the element using the `data-lgid` data attribute. The promise is rejected if no elements match or if more than one match is found. | `() => Promise` |
| `getToolbar()` | Returns the element using the `data-lgid` data attribute. Will throw if no elements match or if more than one match is found. | `() => HTMLButtonElement` |
| `queryToolbar()` | Returns the element using the `data-lgid` data attribute or `null` if no elements match. Will throw if more than one match is found. | `() => HTMLButtonElement \| null` |
| `getAllToolbarIconButtons()` | Returns an array of all `` | `() => Array` |
| `getToolbarIconButtonByLabel()` | Returns the `` based on the label | `(label: string) => ToolbarIconButtonUtils \| null` |
| `getActiveToolbarIconButton()` | Returns the first active `` | `() => HTMLButtonElement \| undefined` |
---
_Source: https://npm.io/package/@leafygreen-ui/toolbar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._