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.
The API version column denotes the minimum API version you must set to use the component in the Developer Console, the Force.com IDE, or via API. Components that don’t specify a minimum API version are usable with any API version 37.0 and later.
Interactive examples for the following components are available in the Component Library (Beta).
Container Components
The following components group related information together.
| Type | Lightning Component Name | Description | Lightning Design System | API Version |
|---|---|---|---|---|
| Accordion | lightning:accordion | A collection of vertically stacked sections with multiple content areas, only one of which is expanded at a time. | Accordion | 41.0 |
| 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 | |
| Carousel | lightning:carousel | A collection of images that are displayed horizontally one at a time. | Carousel | 42.0 |
| 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 | API Version |
|---|---|---|---|---|
| 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 | 41.0 |
| 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 | API Version |
|---|---|---|---|---|
| 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 | 41.0 |
| 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 | 41.0 |
| 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 | API Version |
|---|---|---|---|---|
| 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. | Data Tables | 41.0 |
| Dynamic Icon | lightning:dynamicIcon | A variety of animated icons. | Dynamic Icons | 41.0 |
| 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 | |
| List View | lightning:listView | Displays a list view of the specified object | N/A | 42.0 |
| Path | lightning:path | Displays a path driven by a picklist field and Path Setup metadata. | Path | 41.0 |
| Picklist Path | lightning:picklistPath | Displays a path based on a specified picklist field. | ||
| Pill | lightning:pill | A pill represents an existing item in a database, as opposed to user-generated freeform text. | Pills | |
| Pill Container | lightning:pillContainer | A list of pills grouped in a container. | Pills | 42.0 |
| Progress Bar | lightning:progressBar | A horizontal progress bar from left to right to indicate the progress of an operation. | Progress Bars | 41.0 |
| Progress Indicator and Path | lightning:progressIndicator | Displays steps in a process to indicate what has been completed. | Progress Indicators | 41.0 |
| Tree Grid | lightning:treeGrid | A hierarchical view of data presented in a table. | Trees | 42.0 |
| Spinner | lightning:spinner | Displays an animated spinner. | Spinners |
Field Components
The following components enable you to enter values in a form.
| Type | Lightning Component Name | Description | Lightning Design System | API Version |
|---|---|---|---|---|
| Address | lightning:inputAddress | Represents an address compound field. | Form Layout | 42.0 |
| Checkbox Group | lightning:checkboxGroup | Enables single or multiple selection on a group of options. | Checkbox | 41.0 |
| 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 | 41.0 |
| File Uploader and Preview | lightning:fileUpload | Enables file uploads to a record. | File Selector | 41.0 |
| 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 Field | lightning:inputField | Represents an editable input for a field on a Salesforce object. | Form Layout | 42.0 |
| Input Name | lightning:inputName | Represents a name compound field. | Form Layout | 42.0 |
| Input Location (Geolocation) | lightning:inputLocation | A geolocation compound field that accepts a latitude and longitude value. | Form Layout | 41.0 |
| Radio Group | lightning:radioGroup | Enables single selection on a group of options. | Radio Button | 41.0 |
| 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 | 41.0 |
| 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 | API Version |
|---|---|---|---|---|
| Address | lightning:formattedAddress | Displays a formatted address that provides a link to the given location on Google Maps. | N/A | 42.0 |
| Date/Time | lightning:formattedDateTime | Displays formatted date and time. | ||
| lightning:formattedEmail | Displays an email as a hyperlink with the mailto: URL scheme. | 41.0 | ||
| Geolocation | lightning:formattedLocation | Displays a geolocation using the format latitude, longitude. | 41.0 | |
| Name | lightning:formattedName | Displays a formatted name that can include a salutation and suffix. | 42.0 | |
| Number | lightning:formattedNumber | Displays formatted numbers. | ||
| Output Field | lightning:outputField | Displays a label, help text, and value for a field on a Salesforce object. | 41.0 | |
| Phone | lightning:formattedPhone | Displays a phone number as a hyperlink with the tel: URL scheme. | 41.0 | |
| Rich Text | lightning:formattedRichText | Displays rich text that’s formatted with whitelisted tags and attributes. | 41.0 | |
| Text | lightning:formattedText | Displays text, replaces newlines with line breaks, and linkifies if requested. | 41.0 | |
| Time | lightning:formattedTime | Displays a formatted time based on the user’s locale. | 42.0 | |
| URL | lightning:formattedUrl | Displays a URL as a hyperlink. | 41.0 | |
| Relative Date/Time | lightning:relativeDateTime | Displays the relative time difference between the source date-time and the provided date-time. |
Feature-Specific Components
The following components are usable only in the context of specific Salesforce features.
| Type | Lightning Component Name | Description | Lightning Design System | API Version |
|---|---|---|---|---|
| Lightning Page Region | lightning:flexipageRegionInfo | Provides Lightning page region information to the component that contains it. | N/A | 41.0 |
| Flow Interview | lightning:flow | Represents a flow interview in Lightning runtime. | 41.0 | |
| Omni-Channel Toolkit | lightning:omniToolkitAPI | Provides API access to methods for the Omni-channel toolkit. | 41.0 | |
| Lightning Console Utility Bar | lightning:utilityBarAPI | Provides API access to methods for the utility bar in Lightning Console. | 41.0 | |
| Lightning Console Workspace | lightning:workspaceAPI | Provides API access to methods for the workspace in Lightning Console. | 41.0 | |
| Snap-ins Chat | lightningsnapin:prechatAPI | Enables customization of the user interface for the pre-chat page. | 42.0 |