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 }"/>
The following reference describes how variants in base components correspond to variants in Lightning Design System.
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.
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 |
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.
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.
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.
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 |
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.
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.
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 |
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).
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 |
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.
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 |
A lightning:card component is a group of related information in an article HTML tag. For more information, see lightning:card.
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 |
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.
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 |
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).
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 |
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.
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).
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 |
A lightning:select component is a dropdown list that enables you to select a single option. For more information, see lightning:select.
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 |
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.
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 |
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).
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 |
A lightning:textarea component is an input field for multi-line text input. For more information, see lightning:textarea.
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 |
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.