Lightning Components Developer Guide
jNewer Version Available
Working with Base Lightning Components
Base Lightning components incorporate Lightning Design System markup and classes, providing improved performance and accessibility with a minimum footprint.
These base components handle the details of HTML and CSS for you. Each component provides simple attributes that enable variations in style. This means that you typically don’t need to use CSS at all. The simplicity of the base Lightning component attributes and their clean and consistent definitions make them easy to use, enabling you to focus on your business logic.
You can find base Lightning components in the lightning namespace to complement the existing ui namespace components. In instances where there are matching ui and lightning namespace components, we recommend that you use the lightning namespace component. The lightning namespace components are optimized for common use cases. Beyond being equipped with the Lightning Design System styling, they handle accessibility, real-time interaction, and enhanced error messages.
In subsequent releases, we intend to provide additional base Lightning components. We expect that in time the lightning namespace will have parity with the ui namespace and go beyond it.
In addition, the base Lightning components will evolve with the Lightning Design System over time. This ensures that your customizations continue to match Lightning Experience and the Salesforce app.
For all the components available, see the component reference at https://<myDomain>.lightning.force.com/auradocs/reference.app, where <myDomain> is the name of your custom Salesforce domain or see the Component Reference section.
Container Components
The following components group related information together.
| Type | Lightning Component Name | Description | Lightning Design System |
|---|---|---|---|
| Accordion | lightning:accordion | A collection of vertically stacked sections with multiple content areas, only one of which is expanded at a time. | Accordion |
| lightning:accordionSection | A single section that is nested in a llightning:accordion component. | ||
| Card | lightning:card | Applies a container around a related grouping of information. | Cards |
| Layout | lightning:layout | Responsive grid system for arranging containers on a page. | Grid |
| lightning:layoutItem | A container within a lightning:layout component. | ||
| Tabs | lightning:tab | A single tab that is nested in a lightning:tabset component. | Tabs |
| lightning:tabset | Represents a list of tabs. | ||
| Tile | lightning:tile | A grouping of related information associated with a record. | Tiles |
Input Control Components
The following components are based on buttons.
| Type | Lightning Component Name | Description | Lightning Design System |
|---|---|---|---|
| Button | lightning:button | Represents a button element. | Buttons |
| Button Icon | lightning:buttonIcon | An icon-only HTML button. | Button Icons |
| Button Icon (Stateful) | lightning:buttonIconStateful | An icon-only button that retains state. | Button Icons |
| Button Group | lightning:buttonGroup | Represents a group of buttons. | Button Groups |
| Button Menu | lightning:buttonMenu | A dropdown menu with a list of actions or functions. | Menus |
| lightning:menuItem | A list item in lightning:buttonMenu. | ||
| Button Stateful | lightning:buttonStateful | A button that toggles between states. | Button Stateful |
Navigation Components
The following components are based on buttons.
| Type | Lightning Component Name | Description | Lightning Design System |
|---|---|---|---|
| Breadcrumb | lightning:breadcrumb | An item in the hierarchy path of the page the user is on. | Breadcrumbs |
| lightning:breadcrumbs | A hierarchy path of the page you're currently visiting within the website or app. | ||
| Tree | lightning:tree | Displays a structural hierarchy with nested items. | Trees |
| Button Menu | lightning:buttonMenu | A dropdown menu with a list of actions or functions. | Menus |
| lightning:menuItem | A list item in lightning:buttonMenu. | ||
| Vertical Navigation | lightning:verticalNavigation | A vertical list of links that take you to another page or parts of the page you’re in. | Vertical Navigation |
| lightning:verticalNavigationItem | A text-only link within lightning:verticalNavigationSection or lightning:verticalNavigationOverflow | ||
| lightning:verticalNavigationItemBadge | A link and badge within lightning:verticalNavigationSection or lightning:verticalNavigationOverflow | ||
| lightning:verticalNavigationItemIcon | A link and icon within lightning:verticalNavigationSection or lightning:verticalNavigationOverflow | ||
| lightning:verticalNavigationOverflow | An overflow of items in lightning:verticalNavigation | ||
| lightning:verticalNavigationSection | A section within lightning:verticalNavigation |
Visual Components
The following components provide informative cues, for example, like icons and loading spinners.
| Type | Lightning Component Name | Description | Lightning Design System |
|---|---|---|---|
| Avatar | lightning:avatar | A visual representation of an object. | Avatars |
| Badge | lightning:badge | A label that holds a small amount of information. | Badges |
| Data Table | lightning:datatable | A table that displays columns of data, formatted according to type. | |
| Dynamic Icon | lightning:dynamicIcon | A variety of animated icons. | Dynamic Icons |
| Help Text (Tooltip) | lightning:helptext | An icon with a popover container a small amount of text. | Tooltips |
| Icon | lightning:icon | A visual element that provides context. | Icons |
| Pill | lightning:pill | A pill represents an existing item in a database, as opposed to user-generated freeform text. | Pills |
| Progress Bar | lightning:progressBar | A horizontal progress bar from left to right to indicate the progress of an operation. | Progress Bars |
| Progress Indicator and Path | lightning:progressIndicator | Displays steps in a process to indicate what has been completed. | Progress Indicators |
| Spinner | lightning:spinner | Displays an animated spinner. | Spinners |
Field Components
The following components enable you to enter values.
| Type | Lightning Component Name | Description | Lightning Design System |
|---|---|---|---|
| Checkbox Group | lightning:checkboxGroup | Enables single or multiple selection on a group of options. | Checkbox |
| Combobox | lightning:combobox | An input element that enables single selection from a list of options. | Combobox |
| Dual Listbox | lightning:dualListbox | Provides an input listbox accompanied with a listbox of selectable options. Options can be moved between the two lists. | Dueling Picklist |
| File Uploader and Preview | lightning:fileUpload | Enables file uploads to a record. | File Selector |
| lightning:fileCard | Displays a representation of uploaded content. | Files | |
| Input | lightning:input | Represents interactive controls that accept user input depending on the type attribute. | Input |
| Input Location (Geolocation) | lightning:inputLocation | A geolocation compound field that accepts a latitude and longitude value. | N/A |
| Radio Group | lightning:radioGroup | Enables single selection on a group of options. | Radio Button |
| Select | lightning:select | Creates an HTML select element. | Select |
| Slider | lightning:slider | An input range slider for specifying a value between two specified numbers. | Slider |
| Rich Text Area | lightning:inputRichText | A WYSIWYG editor with a customizable toolbar for entering rich text. | Rich Text Editor |
| Text Area | lightning:textArea | A multiline text input. | Textarea |
Formatted Components
The following components enable you to display read-only formatted values.
| Type | Lightning Component Name | Description | Lightning Design System |
|---|---|---|---|
| Date/Time | lightning:formattedDateTime | Displays formatted date and time. | N/A |
| lightning:formattedEmail | Displays an email as a hyperlink with the mailto: URL scheme. | ||
| Geolocation | lightning:formattedLocation | Displays a geolocation using the format latitude, longitude. | |
| Number | lightning:formattedNumber | Displays formatted numbers. | |
| Phone | lightning:formattedPhone | Displays a phone number as a hyperlink with the tel: URL scheme. | |
| Rich Text | lightning:formattedRichText | Displays rich text that’s formatted with whitelisted tags and attributes. | |
| Text | lightning:formattedText | Displays text, replaces newlines with line breaks, and linkifies if requested. | |
| URL | lightning:formattedUrl | Displays a URL as a hyperlink. | |
| Relative Date/Time | lightning:relativeDateTime | Displays the relative time difference between the source date-time and the provided date-time. |