Rich Text Toolbar Button

The lightning-rich-text-toolbar-button component creates a button for the toolbar for lightning-input-rich-text.

Place lightning-rich-text-toolbar-button inside the lightning-rich-text-toolbar-button-group component, which groups the custom buttons.

You can include multiple button groups, and each group can contain multiple buttons.

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

Use the icon-name attribute to specify a Lightning Design System utility icon to display on the button.

Use icon-alternative-text to describe the button's function for users of assistive technologies.

The selected attribute reflects the state of the button. Specify selected in the lightning-rich-text-toolbar-button component to indicate when the button is selected, and the button background color is dark. By default, selected is false and the button background color is light.

Specify the disabled attribute to display the button icon as light gray and prevent the button from being selected.

You can create buttons by using the lightning-rich-text-toolbar-button component attributes and the onclick handler to perform an action. For example, you can create a handler to format text, insert text, attach a file to a feed post, or open a popup to do whatever you want.

For information about formatting or inserting text programmatically, see the lightning-input-rich-text documentation.

This example includes one button group that contains one button for applying code-block format. The code-block format is not a default format in lightning-input-rich-text, so the formats attribute specifies all the formats required in the toolbar.

The handler gets the format currently set in the editor, and applies or removes the code-block format, depending on the current format.

The lightning-rich-text-toolbar-button component provides methods that enable you to open and close popups from custom buttons.

Use the showPopup() method to open a popup from a custom button, and use closePopup() to close it.

Provide the content of the popup by nesting components inside lightning-rich-text-toolbar-button.

Popups close by default if you click outside the popup. The popupclickout event fires when you click outside, so you can use a handler on this event to prevent closing if needed.

This example creates a Save button that opens a popup to prompt the user to save the content. The popup content consists of a text input field and two buttons. The Save custom button prevents the default clickout behavior.

To indicate to assistive technologies that the button can open an interactive dialog, specify aria-haspopup="dialog".

The JavaScript simply calls showPopup() to create the popup. The component handles the positioning and styling of the popup for you.

The example's handlePopupClickout function calls event.preventDefault() to prevent the popup from closing. The user can only close it by clicking the popup's Save or Cancel buttons, or by pressing the Escape key.

Use icon-alternative-text to describe the button's function. The text is displayed on the title attribute for the button tooltip and as assistive text for users of assistive technologies.

Use aria-haspopup to indicate the availability and type of interactive popup element on a toggle button. See MDN web docs: aria-haspopup.

When a toolbar button is clicked once, the aria-pressed attribute is appended with a value of true, which tells assistive technologies that a button is in a pressed state. The button remains in the pressed state until it's clicked another time, which changes the value back to false. For example, the bold formatting button is a toggle button that either applies or removes bold formatting on selected text. The button turns blue when clicked once and aria-pressed is true. When the button is clicked another time, the blue background on the button is removed and aria-pressed is false.

Toolbar buttons that open a dialog use aria-haspoup and not aria-pressed as they aren't toggle buttons.

popupclickout

The event fired when a popup is open and you click outside it.

The popupclickout event returns no parameters.

The event properties are as follows.