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

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="buttonGroup" model="lwc" namespace="lightning"}

:::::

:::::tab

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:

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.

<template>
    <lightning-button-group>
        <lightning-button label="Alpha"></lightning-button>
        <lightning-button label="Beta"></lightning-button>
        <lightning-button label="Gamma"></lightning-button>
    </lightning-button-group>
</template>

Handle clicks by using the onclick handler.

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

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

import { LightningElement } from "lwc";

export default class DemoApp extends LightningElement {
  handleClick(event) {
    const buttonLabel = event.target.label;
    //  Handle clicks
  }
}

To handle navigation within Lightning Experience and the Salesforce app, use the lightning-navigation component.

Design

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

Component Styling

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.

Button Group

Design

Component Styling

See Also