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.
<aura:component> <lightning:buttonGroup> <lightning:button label="Refresh" onclick="{!c.handleClick}"/> <lightning:button label="Edit" onclick="{!c.handleClick}"/> <lightning:button label="Save" onclick="{!c.handleClick}"/> </lightning:buttonGroup> </aura:component>
The onclick handler in lightning:button calls the handleClick client-side controller, which returns the label of the button that was clicked.
({ handleClick: function (cmp, event, helper) { var selectedButtonLabel = event.getSource().get("v.label"); alert("Button label: " + selectedButtonLabel); } })
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
class | String | A CSS class for the outer element, in addition to the component's base classes. | |
title | String | Displays tooltip text when the mouse moves over the element. |