---
schema_version: "1"
id: 014d8c2576a1bd71a37bb7a23f48e6b7b5a91bad92550d758f52eaa0e75710aa
title: Button Group
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/buttonGroup/lightning-button-group.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-button-group.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 6c402189fadd8ecf7787174341795904bf83999748400526c054628cd4baef45
products:
  - Lightning Component Reference
---

# 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:

- [`lightning-button`](/docs/platform/lightning-component-reference/guide/lightning-button.html)
- [`lightning-button-icon`](/docs/platform/lightning-component-reference/guide/lightning-button-icon.html)
- [`lightning-button-icon-stateful`](/docs/platform/lightning-component-reference/guide/lightning-button-icon-stateful.html)
- [`lightning-button-menu`](/docs/platform/lightning-component-reference/guide/lightning-button-menu.html)
- [`lightning-button-stateful`](/docs/platform/lightning-component-reference/guide/lightning-button-stateful.html)

To create navigational tabs, use [`lightning-tabset`](/docs/platform/lightning-component-reference/guide/lightning-tabset.html) 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.

<!-- prettier-ignore-start -->
```html
<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>
```
<!-- prettier-ignore-end -->

Handle clicks by using the `onclick` handler.

<!-- prettier-ignore-start -->
```html
<lightning-button-group>
    <lightning-button label="Edit" onclick={handleClick}></lightning-button>
    <lightning-button label="View" onclick={handleClick}></lightning-button>
</lightning-button-group>
```
<!-- prettier-ignore-end -->

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

```javascript
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`](/docs/platform/lightning-component-reference/guide/lightning-navigation.html) 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](https://v1.lightningdesignsystem.com/components/button-groups/)                                                       | [Button Groups](https://www.lightningdesignsystem.com/components/button-groups/)                                |
| **For Use In** | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app, Mobile Offline | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

## Component Styling

To apply additional styling, use SLDS [utility classes](https://v1.lightningdesignsystem.com/utilities/alignment) 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.

## See Also

[lightning-navigation](/docs/platform/lightning-component-reference/guide/lightning-navigation.html)

[Navigate to Pages](https://developer.salesforce.com/docs/platform/lwc/guide/use-navigate)


:::::

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

:::::

::::::