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 Salesforce1.
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.
The following components are interactive, for example, like buttons and tabs.
Type | Lightning Components | Description | Lightning Design System |
---|---|---|---|
Button | lightning:button | Represents a button element. | Buttons |
Button Icon | lightning:buttonIcon | An icon-only HTML button. | 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 |
Select | lightning:select | Creates an HTML select element. | Select |
Tabs | lightning:tab | A single tab that is nested in a lightning:tabset component. | Tabs |
lightning:tabset | Represents a list of tabs. |
The following components provide informative cues, for example, like icons and loading spinners.
Type | Lightning Components | 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 |
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. | ||
Card | lightning:card | Applies a container around a related grouping of information. | Cards |
Icon | lightning:icon | A visual element that provides context. | Icons |
Layout | lightning:layout | Responsive grid system for arranging containers on a page. | Grid |
lightning:layoutItem | A container within a lightning:layout component. | ||
Pill | lightning:pill | A pill represents an existing item in a database, as opposed to user-generated freeform text. | Pills |
Spinner | lightning:spinner | Displays an animated spinner. | Spinners |
Tile | lightning:tile | A grouping of related information associated with a record. | Tiles |
The following components enable you to enter or display values.
Type | Lightning Components | Description | Lightning Design System |
---|---|---|---|
Input | lighting:input | Represents interactive controls that accept user input depending on the type attribute. | Forms |
Internationalization | lighting:formattedDateTime | Displays formatted date and time. | N/A |
lightning:formattedNumber | Displays formatted numbers. | ||
lightning:relativeDateTime | Displays the relative time difference between the source date-time and the provided date-time. | ||
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 |