Title: ToolbarGroup
Published: March 9, 2021
Last modified: September 4, 2026

---

# ToolbarGroup

## In this article

 * [Usage](https://developer.wordpress.org/block-editor/reference-guides/components/toolbar-group/?output_format=md#usage)
    - [Props](https://developer.wordpress.org/block-editor/reference-guides/components/toolbar-group/?output_format=md#props)
 * [Related components](https://developer.wordpress.org/block-editor/reference-guides/components/toolbar-group/?output_format=md#related-components)

[ Back to top](https://developer.wordpress.org/block-editor/reference-guides/components/toolbar-group/?output_format=md#wp--skip-link--target)

A ToolbarGroup can be used to create subgroups of controls inside a [Toolbar](https://developer.wordpress.org/block-editor/reference-guide/components/toolbar/toolbar/).

## 󠀁[Usage](https://developer.wordpress.org/block-editor/reference-guides/components/toolbar-group/?output_format=md#usage)󠁿

    ```language-jsx
    import { Toolbar, ToolbarGroup, ToolbarButton } from '@wordpress/components';
    import { paragraph, formatBold, formatItalic, link } from '@wordpress/icons';

    function MyToolbar() {
        return (
            <Toolbar label="Options">
                <ToolbarGroup>
                    <ToolbarButton icon={ paragraph } label="Paragraph" />
                </ToolbarGroup>
                <ToolbarGroup>
                    <ToolbarButton icon={ formatBold } label="Bold" />
                    <ToolbarButton icon={ formatItalic } label="Italic" />
                    <ToolbarButton icon={ link } label="Link" />
                </ToolbarGroup>
            </Toolbar>
        );
    }
    ```

### 󠀁[Props](https://developer.wordpress.org/block-editor/reference-guides/components/toolbar-group/?output_format=md#props)󠁿

ToolbarGroup will pass all HTML props to the underlying element.

## 󠀁[Related components](https://developer.wordpress.org/block-editor/reference-guides/components/toolbar-group/?output_format=md#related-components)󠁿

 * ToolbarGroup may contain [ToolbarButton](https://developer.wordpress.org/block-editor/reference-guide/components/toolbar/toolbar-button/)
   and [ToolbarItem](https://developer.wordpress.org/block-editor/reference-guide/components/toolbar/toolbar-item/)
   as children.

First published

March 9, 2021

Last updated

September 4, 2026

Edit article

[ Improve it on GitHub: ToolbarGroup ](https://github.com/WordPress/gutenberg/edit/trunk/packages/components/src/toolbar/toolbar-group/README.md)

[  Previous: ToolbarDropdownMenu](https://developer.wordpress.org/block-editor/reference-guides/components/toolbar-dropdown-menu/)

[  Next: ToolbarItem](https://developer.wordpress.org/block-editor/reference-guides/components/toolbar-item/)