<aura:component> <!-- bare --> <lightning:buttonIcon iconName="utility:settings" variant="bare" onclick="{! c.handleClick }" alternativeText="Settings" title="Settings" /> <lightning:buttonIcon iconName="utility:settings" variant="bare" onclick="{! c.handleClick }" disabled="true" alternativeText="Settings (disabled)" title="Settings (disabled)" /> <!-- with brand --> <lightning:buttonIcon iconName="utility:settings" variant="brand" alternativeText="Settings" title="Settings" /> <lightning:buttonIcon iconName="utility:settings" variant="brand" disabled="true" alternativeText="Settings (disabled)" title="Settings (disabled)" /> <!-- with container --> <lightning:buttonIcon iconName="utility:settings" variant="container" alternativeText="Settings" title="Settings" /> <lightning:buttonIcon iconName="utility:settings" variant="container" disabled="true" alternativeText="Settings (disabled)" title="Settings (disabled)" /> <!-- with border / by default --> <lightning:buttonIcon iconName="utility:settings" alternativeText="Settings" title="Settings" /> <lightning:buttonIcon iconName="utility:settings" disabled="true" alternativeText="Settings (disabled)" title="Settings (disabled)" /> <!-- with border filled --> <lightning:buttonIcon iconName="utility:settings" variant="border-filled" alternativeText="Settings" title="Settings" /> <lightning:buttonIcon iconName="utility:settings" variant="border-filled" disabled="true" alternativeText="Settings (disabled)" title="Settings (disabled)" /> <!-- with icon styling --> <lightning:buttonIcon iconName="utility:settings" variant="bare" alternativeText="Settings" iconClass="dark" title="Settings" /> </aura:component>