Use Base Lightning Component Design Variations
Many base Lightning 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 text and background colors to the buttons.
If a 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.
If you don’t specify
variant, or if you specify an unsupported value, the default value is used. For
lightning-button, the default is
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
You can also apply utility classes to elements nested in some base components, as shown in the following example. The body of the
lightning-card base component uses the
slds-p-horizontal_small padding utility class.
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.