Rich Text Toolbar Button Group | Components | Lightning Component Reference

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

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.

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	Rich Text Editor
For Use In	Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Mobile Offline	Lightning Experience

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

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

For more information about custom buttons, see lightning-rich-text-toolbar-button documentation.

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.