Button Group

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-button
• lightning-button-icon
• lightning-button-icon-stateful
• lightning-button-menu
• lightning-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.

1<template>
2    <lightning-button-group>
3        <lightning-button label="Alpha"></lightning-button>
4        <lightning-button label="Beta"></lightning-button>
5        <lightning-button label="Gamma"></lightning-button>
6    </lightning-button-group>
7</template>

Handle clicks by using the onclick handler.

1<lightning-button-group>
2    <lightning-button label="Edit" onclick={handleClick}></lightning-button>
3    <lightning-button label="View" onclick={handleClick}></lightning-button>
4</lightning-button-group>

In your JavaScript code, use the event.target property to retrieve the label of the clicked button.

1import { LightningElement } from "lwc";
2
3export default class DemoApp extends LightningElement {
4  handleClick(event) {
5    const buttonLabel = event.target.label;
6    //  Handle clicks
7  }
8}

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.

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.

lightning-navigation

Navigate to Pages