---
schema_version: "1"
id: 57f9331a34d5dce6e845df500b6b112288bded7c11621c3b373e48f8066d2c8e
title: Working with Lightning Design System Variants
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/slds/lightning-base-variants.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/lightning-base-variants.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: e85c122ae3fd7a8766e9accdc8954f510e07dec86f73d40f529e592d5bdf5d2b
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Working with Lightning Design System Variants

Base component variants correspond to blueprint variations in Lightning Design System. Variants change the appearance of a component and are controlled by the `variant` attribute.

## 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. We try to create variants for each component to apply the design of variations and examples from the SLDS component blueprint. However, not all variants are implemented yet. 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.

```nolang
<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.

```nolang
<lightning:card footer="Card Footer" title="Hello">
    <aura:set attribute="actions">
        <lightning:button label="New"/>
    </aura:set>
    <p class="slds-p-horizontal_small">
        Card Body with a Lightning Design System class
    </p>
</lightning:card>
```

If you don’t find a variant you need, 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](https://www.lightningdesignsystem.com/components/overview).

**note:** Interactive examples for base components are available in the [Lightning Component Library](https://developer.salesforce.com/docs/platform/aura-platform/components/component-library.md).