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 can be displayed together to create a navigational bar. The body of the component can contain one or more of the following components:
lightning-buttonlightning-button-iconlightning-button-icon-statefullightning-button-menulightning-button-stateful
If navigational tabs are needed, use lightning-tabset instead of lightning-button-group.
Set variant="border-filled" on lightning-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 using the onclick handler.
In your JavaScript code, use the event.target property to retrieve 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).
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 using SLDS styling hooks. For more information, see the corresponding base component documentation.