---
schema_version: "1"
id: 9e340c4ddc290671853d38152334974473f310606a4c48a73fc81a711ad82555
title: Rich Text Toolbar Button Group
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/richTextToolbarButtonGroup/lightning-rich-text-toolbar-button-group.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-rich-text-toolbar-button-group.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: f3379d08a66286878f502cd43e8c2c2eb14e5d753cbb9a2750b413562ab392df
products:
  - Lightning Component Reference
---
# Rich Text Toolbar Button Group

**`lightning-rich-text-toolbar-button-group`**

Creates a custom button group in lightning-input-rich-text.

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App

::::::tabset{tabs='[ "Develop", "Specifications"]'}

:::::tab

The `lightning-rich-text-toolbar-button-group` component is a container
component for custom buttons in `lightning-input-rich-text`. The `lightning-input-rich-text` component inserts the button group in a named slot.

To include the button group, place the `lightning-rich-text-toolbar-button-group` component inside
`lightning-input-rich-text` and specify the attribute `slot="toolbar"`
to create a group for custom buttons. The rich text editor displays the button group at the end of the toolbar after the **Remove formatting** button.

Place `lightning-rich-text-toolbar-button` components inside
`lightning-rich-text-toolbar-button-group` to define custom buttons.

A group is required for custom buttons, even if there’s only one custom button.

You can include multiple custom button groups in `lightning-input-rich-text`
and include multiple custom buttons in each `lightning-rich-text-toolbar-button-group`.

## Design

Use `lightning-rich-text-toolbar-button-group` within `lightning-input-rich-text`, which implements the rich text editor blueprint in the Salesforce Lightning Design System (SLDS). The rich text editor adapts to SLDS 1 or SLDS 2 styling based on the org's theme or the container app that you use.

|                | SLDS 1                                                                                                      | SLDS 2                                                                                                          |
| :------------- | :---------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------- |
| **Design**     | [Rich Text Editor](https://v1.lightningdesignsystem.com/components/rich-text-editor)                        | [Rich Text Editor](https://www.lightningdesignsystem.com/components/rich-text-editor/)                          |
| **For Use In** | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Mobile Offline | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

## Usage

This example shows basic usage for two button groups, each using the `toolbar` slot.

![Rich text editor with a custom toolbar groups](https://developer.salesforce.com/media/components/rich-text-toolbar-button-group.jpg '{"class": "image-lg", "title": "Rich Text Editor with Custom Toolbar Button Groups"}')

The component inserts the button groups after the **Remove formatting** button.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-input-rich-text>
        <lightning-rich-text-toolbar-button-group
            slot="toolbar"
            aria-label="Template Button Group"
        >
            <lightning-rich-text-toolbar-button
                icon-name="utility:insert_template"
                icon-alternative-text="Insert Doc Template"
                onclick={handleInsertDocTemplate}
            >
            </lightning-rich-text-toolbar-button>
            <lightning-rich-text-toolbar-button
                icon-name="utility:email"
                icon-alternative-text="Insert Email Template"
                onclick={handleInsertEmailTemplate}
            >
            </lightning-rich-text-toolbar-button>
        </lightning-rich-text-toolbar-button-group>
        <lightning-rich-text-toolbar-button-group
            slot="toolbar"
            aria-label="Save Button Group"
        >
            <lightning-rich-text-toolbar-button
                icon-name="utility:save"
                icon-alternative-text="Save"
                onclick={handleSave}
            >
            </lightning-rich-text-toolbar-button>
        </lightning-rich-text-toolbar-button-group>
    </lightning-input-rich-text>
</template>
```
<!-- prettier-ignore-end -->

For more information about custom buttons, see
[`lightning-rich-text-toolbar-button`](/docs/platform/lightning-component-reference/guide/lightning-rich-text-toolbar-button.html)
documentation.

## Accessibility

Specify the attribute `aria-label` to provide a label to inform
assistive device users about the button group.

Use the Tab key to navigate to the buttons, and then use
Left and Right arrow keys to navigate among the buttons until
you reach the custom button group.


:::::

:::::tab
::component-specification{component="richTextToolbarButtonGroup" model="lwc" namespace="lightning"}

:::::

::::::