lightning:buttonGroup

A lightning:buttonGroup component represents a set of buttons that can be displayed together to create a navigational bar. The body of the component can contain lightning:button or lightning:buttonMenu. If navigational tabs are needed, use lightning:tabset instead of lightning:buttonGroup.

This component inherits styling from button groups in the Lightning Design System.

To create buttons, use the lightning:button component as shown in this example.

1<aura:component>
2    <lightning:buttonGroup>
3        <lightning:button label="Refresh" onclick="{!c.handleClick}"/>
4        <lightning:button label="Edit" onclick="{!c.handleClick}"/>
5        <lightning:button label="Save" onclick="{!c.handleClick}"/>
6    </lightning:buttonGroup>
7</aura:component>

The onclick handler in lightning:button calls the handleClick client-side controller, which returns the label of the button that was clicked.

1({
2    handleClick: function (cmp, event, helper) {       
3        var selectedButtonLabel = event.getSource().get("v.label");
4        alert("Button label: " + selectedButtonLabel);
5    }
6})

Attributes