Working with Lightning Design System Variants

Applying Variants to Base Components

Variants on a component refer to design variations for that component, which enable you to change the appearance of the component easily. While we try to create base component variants to match their respective Lightning Design System variants, it’s not a one-to-one correspondence. Most base components provide a variant attribute that accepts two or more variants. For example, lightning:button supports many variants to apply different text and background colors on the buttons.

This example creates a button with the brand variant.

1<lightning:button variant="brand" label="Brand" onclick="{! c.handleClick }" />

If you don’t specify a variant or you pass in a variant that’s not supported, the default variant is used instead. For button, the neutral variant is used by default.

Some components don’t support a variant attribute, but you can use Lightning Design System classes to achieve the styling you want.

This example uses a Lightning Design System class to apply a padding to a paragraph in the lightning:card component.

1<lightning:card footer="Card Footer" title="Hello">
2    <aura:set attribute="actions">
3        <lightning:button label="New"/>
4    </aura:set>
5    <p class="slds-p-horizontal_small">
6        Card Body with a Lightning Design System class
7    </p>
8</lightning:card>

If you don’t see a variant you need, check to see if you can pass in a Lightning Design System class to the base component before creating your own custom CSS class. Don’t be afraid to experiment with Lightning Design System classes and variants in base components. For more information, see Lightning Design System.