I wanted to save some space and trade out the standard buttons with labels for x-small button icons. I originally had the buttons in a grid col, and when I changed to just lightning:buttonIcon they wouldn't display. After monkeying around with it, I finally just put a new card in the component with just the buttonIcons from the example docs and it still won't work. What's the problem?

Here's the component mark-up:

<lightning:card iconName="standard:data_integration_hub" title="{!v.headerTitle}">

    <lightning:buttonIcon iconName="utility:settings" variant="bare" onclick="{! c.handleClick }" alternativeText="Settings" />
    <lightning:buttonIcon iconName="utility:settings" variant="bare" onclick="{! c.handleClick }" disabled="true" alternativeText="Settings (disabled)" />
    <lightning:buttonIcon iconName="utility:left" variant="bare" size="x-small" alternativeText="this"
                                      onclick="{!c.onFirst}" disabled="{! v.currentPageNumber == 1}"/>
    <lightning:buttonIcon iconName="utility:chevronleft" variant="bare"
                                      onclick="{!c.onPrev}" disabled="{! v.currentPageNumber == 1}"/>

2 Answers 2


Update: Apparently it doesn't like the 'variant="bare"' modifier, even though that is exactly what is in the examples found at


I'll just make them xtra small and live with the button borders, unless someone has a good suggestion. Thanks.


If you are using/testing in a stand-alone app, make sure your app extends force:slds, or you won't see anything other than boxes with the alternative text.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .