Working with Lightning Design System Variants

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

If you pass in a variant that’s not supported, the default variant is used instead. This example creates a button with the base variant.

<lightning:button variant="base" label="Base" onclick="{! c.handleClick }"/>
Note

Note

Base components that are data-driven and don’t have any visual styling, such as lightning:formattedDateTime, are not listed here. You can find all base components in the Component Reference.

The following reference describes how variants in base components correspond to variants in Lightning Design System.

Avatar

A lightning:avatar component is an image that represents an object, such as an account or user. You can create avatars in different sizes. For more information, see lightning:avatar.

Avatar variants
Base Component Variant Lightning Design System Class Name Description
square (default) slds-avatar--square An avatar with a rounded square shape
empty slds-avatar A basic avatar
circle slds-avatar--circle An avatar with a circular shape

Badge

A lightning:badge component is a label containing a small amount of information. This component does not support variants. For more information, see lightning:badge.

Badge

Breadcrumb

A lightning:breadcrumbs component is a label containing a small amount of information. This component does not support variants. For more information, see lightning:breadcrumbs.

Breadcrumbs

Button

A lightning:button component is a button that executes an action in a client-side controller. Buttons support icons to the left or right of the text label. For more information, see lightning:button.

Button variants

Button inverse variants

Base Component Variant Lightning Design System Class Name Description
neutral (default) slds-button--neutral A button with gray border and white background
base slds-button A button without a border, which appears like a text link
brand slds-button--brand A blue button with white text
destructive slds-button--desctructive A red button with white text
inverse slds-button--inverse A dark blue button with white text

Button Group

A lightning:buttonGroup component is a group of buttons that can be displayed together to create a navigational bar. You can nest lightning:button and lightning:buttonMenu components in the group. Although the button group itself doesn’t support variants, variants are supported for buttons and the button menu components. For example, you can nest <lightning:button variant="inverse" label="Refresh" /> in a button group. If including lightning:buttonMenu, place it after the buttons and pass in the slds-button--last class to adjust the border. For example, nest For more information, see lightning:buttonGroup.

Button group

Button Icon

A lightning:buttonIcon component is an icon-only button that executes an action in a client-side controller. You can create button icons in different sizes. Only Lightning Design System utility icons are supported. For more information, see lightning:buttonIcon.

Button icon variants

Button icon inverse variants

Base Component Variant Lightning Design System Class Name Description
border (default) slds-button--icon-border A button that contains an icon with gray border
bare slds-button--icon-bare A button that looks like a plain icon
container slds-button--icon-container A 32px by 32px button that looks like a plain icon
border-filled slds-button--icon-border-filled A button that contains an icon with gray border and white background
bare-inverse slds-button--icon-inverse A button that contains a white icon without borders for a dark background
border-inverse slds-button--icon-border-inverse A button that contains a white icon for a dark background

Button Menu

A lightning:buttonMenu component is a dropdown menu with a list of menu items, represented by lightning:menuItem components. Menu items can be checked or unchecked, or execute an action in a client-side controller. You can create button menus with icons in different sizes and position the dropdown menu in different positions relative to the button. The variant changes the appearance of the button, and is similar to the variants on button icons. For more information, see lightning:buttonMenu (Beta).

Button menu with utility icon

Button menu with dropdown

Button menu with checked menu item

Base Component Variant Lightning Design System Class Name Description
border (default) slds-button--icon-border A button that contains an icon with gray border
bare slds-button--icon-bare A button that looks like a plain icon
container slds-button--icon-container A 32px by 32px button that looks like a plain icon
border-filled slds-button--icon-border-filled A button that contains an icon with gray border and white background
bare-inverse slds-button--icon-inverse A button that contains a white icon without borders for a dark background
border-inverse slds-button--icon-border-inverse A button that contains a white icon for a dark background

Stateful Button

A lightning:buttonStateful component is a button that toggles between states. Stateful buttons can show a different label and icon based on their states. Only Lightning Design System utility icons are supported. For more information, see lightning:buttonStateful.

Stateful button variants

Stateful button inverse variants

Base Component Variant Lightning Design System Class Name Description
neutral (default) slds-button--neutral A button with gray border and white background
brand slds-button--brand A blue button with white text
inverse slds-button--inverse A dark blue button with white text
text slds-button A button that contains an icon with gray border and white background

Card

A lightning:card component is a group of related information in an article HTML tag. For more information, see lightning:card.

Card narrow variant
Base Component Variant Lightning Design System Class Name Description
base (default) slds-card A group of related information that takes the width of the container
narrow slds-card--narrow A group of related information that has narrow width

Icon

A lightning:icon component is a visual element that provides context and enhances usability. Although all Lightning Design System icons are supported, only utility icons support variants. You can create icons in different sizes. For more information, see lightning:icon.

Icons
Base Component Variant Lightning Design System Class Name Description
inverse (default) slds-icon Previously named “bare”. A 32px by 32px icon.
error slds-icon-text-error An icon with a red fill
warning slds-icon-text-warning An icon with a yellow fill

Input

A lightning:input component is an interactive control, such as an input field or checkbox, which accepts user input. For more information, see lightning:input (Beta).

Input fields

CheckboxesRadio buttonsToggles

Base Component Variant Lightning Design System Class Name Description
standard (default) slds-input

slds-form-element

slds-form-element__control

An input element, which can be an input field, checkbox, toggle, radio button, or other types. The class appended to the element depends on the input type.
label-hidden slds-form--inline An input element with a hidden label

Layout

A lightning:layout component is a flexible grid system for arranging containers within a page or another container. Instead of using the variant attribute, customization of the layout is controlled by horizontalAlign, verticalAlign, and pullToBoundary. For more information, see the following resources.

Pill

A lightning:pill component is a text label that’s wrapped by a rounded border and displayed with a remove button. Pills can contain an icon or avatar next to the text label. This component does not support variants, but its content and other attributes determine the styling applied to them. For example, a pill with hasError="true" displays as a pill with a red border and error icon. For more information, see lightning:pill.

Pills

Rich Text Editor

A lightning:inputRichText component is rich text editor with a customizable toolbar. The toolbar is displayed at the top of the editor but you can change its position to below the editor using the bottom-toolbar variant. For more information, see lightning:inputRichText (Beta).

Rich text editor with default variant
Base Component Variant Lightning Design System Class Name Description
bottom-toolbar slds-rich-text-editor__toolbar-bottom A rich text editor with a toolbar placed below the editor

Select

A lightning:select component is a dropdown list that enables you to select a single option. For more information, see lightning:select.

Select element with default variant
Base Component Variant Lightning Design System Class Name Description
standard (default) slds-select A select input element that supports single selection of values
label-hidden slds-form--inline A select input element with a hidden label

Spinner

A lightning:spinner component is a spinner that indicates data is loading. You can create spinners in different sizes. For more information, see lightning:spinner.

Spinners with default variant
Base Component Variant Lightning Design System Class Name Description
brand (default) slds-spinner A gray spinner
inverse slds-spinner--inverse A spinner for a dark background

Tabs

A lightning:tabset component is a list of tabs with corresponding content areas, represented by lightning:tab components. For more information, see lightning:tabset (Beta).

Tabset with default variant

Tabset with scoped variant

Base Component Variant Lightning Design System Class Name Description
default slds-tabs--default A list of tabs and content areas without borders
scoped slds-tabs--scoped A list of tabs and content areas with borders

Textarea

A lightning:textarea component is an input field for multi-line text input. For more information, see lightning:textarea.

Text area with default variant
Base Component Variant Lightning Design System Class Name Description
standard (default) slds-form-element A textarea element with a text label
label-hidden slds-form--inline A textarea element with a hidden label

Tile

A lightning:tile component is a group of related information. This component does not support variants, but you can pass in the slds-tile--board class to create a board. Similarly, use a definition list in the tile body to create a tile with an icon or uses an unordered list to create a list of tiles with avatars. For more information, see lightning:tile.

Tile with definition lists

Tile with unordered list