Many Lightning base components have several design variations. Each design variation gives a component a different look.
Base component design variations correspond to variations in Lightning Design System (SLDS). For example, lightning-button supports design variations that apply different colors for text and background to the buttons.
If a base component has design variations, it has a variant attribute. Use the variant attribute to pick the design variation.
This example creates a button with the brand design variation, which provides a blue background color on the button.
1<lightning-button
2 variant="brand"
3 label="Submit"
4 title="submit form"
5 onclick={handleClick}
6></lightning-button>If you don’t specify variant, or if you specify an unsupported value, the component uses the default value. For lightning-button, the default variant is neutral.
If you don’t see a design variation that you like, or if a component doesn’t have a variant attribute, use Lightning Design System classes to achieve the styling you want.
For example, to apply a margin utility class to the lightning-button base component, use class="slds-m-left_medium".
1<lightning-button
2 variant="brand"
3 label="Submit"
4 title="submit"
5 onclick={handleSubmit}
6 class="slds-m-left_medium"
7></lightning-button>You can also apply utility classes to elements nested in some base components. In this example, the body of the lightning-card base component uses the slds-p-horizontal_small padding utility class.
1<lightning-card title="Hello">
2 <lightning-button label="New" slot="actions"></lightning-button>
3 <p class="slds-p-horizontal_small">Card Body (custom component)</p>
4 <p slot="footer">Card Footer</p>
5</lightning-card>If you can’t find a suitable design variation or SLDS class, consider using styling hooks.
View the design variations and interactive examples for base components in the Component Reference.
Tip
j