Button Group
lightning-button-group
Represents a group of buttons.
For Use In
Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline
A lightning-button-group component represents a set of buttons that appear together to create a navigational bar. The body of the component can contain one or more of these components:
lightning-buttonlightning-button-iconlightning-button-icon-statefullightning-button-menulightning-button-stateful
To create navigational tabs, use lightning-tabset instead of lightning-button-group.
When you use lightning-button-menu, set variant="border-filled" on the button menu for a white button background. Otherwise, the lightning-button-menu background is transparent by default.
To create buttons, use the lightning-button component as shown in this example.
Handle clicks by using the onclick handler.
In your JavaScript code, use the event.target property to retrieve the label of the clicked button.
To handle navigation within Lightning Experience and the Salesforce app, use the lightning-navigation component.
lightning-button-group implements the button groups blueprint in the Salesforce Lightning Design System (SLDS). The button groups adapt 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 | Button Groups | Button Groups |
| For Use In | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app, Mobile Offline | Lightning Experience |
To apply additional styling, use SLDS utility classes with the class attribute.
You can customize the lightning-button-* base components you use within lightning-button-group by using SLDS styling hooks. For more information, see the corresponding base component documentation.