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.
The following components are new. For more information on these components, refer to the Lightning Components Developer Guide.
- A label that holds a small amount of information, such as the number of unread notifications.
- A button element. Buttons can be either a label only, label and icon, body only, or body and icon.
- Represents a set of buttons that can be displayed together to create a navigational bar.
- An icon-only HTML button.
- lightning:buttonMenu (Beta)
- Represents a button that when clicked displays a dropdown menu of actions.
- Applies a stylized container around a grouping of information. The information could be a single item or a group of items such as a related list.
- lightning:formattedDateTime (Beta)
- Displays formatted date and time.
- lightning:formattedNumber (Beta)
- Displays formatted numbers for decimals, currency, and percentages.
- A visual element that provides context and enhances usability. Icons can be used inside the body of another component or on their own.
- lightning:input (Beta)
- Represents interactive controls that accept user input depending on the type attribute.
- Represents a responsive grid system for arranging containers on a page.
- An item in a lightning:layout.
- lightning:menuItem (Beta)
- Represents a menu item within the lightning:buttonMenu dropdown component.
- Creates an HTML select element.
- Represents an animated spinner.
- lightning:tab (Beta)
- Represents a single tab that is nested in a lightning:tabset component.
- lightning:tabset (Beta)
- Displays a tabbed container with multiple content areas.
- Represents a multiline text input.
The following components have changed since the initial release.
- The compact variant is no longer supported. Additionally, the styling in the card body has been removed such that it’s no longer center aligned. You can use the Lightning Design System helper classes to modify the look and behavior of the card body.
- The following attributes are new.
- The following attributes are new.
- menuAlignment—Determines the alignment of the menu relative to the button. Available options are left, center, and right. This value defaults to left.
- name—The name for the button element. This value is optional and can be used to identify the button in a callback.
- value—The value for the button element. This value is optional and can be used when submitting a form.
The following attributes have been changed.
- onSelect—This attribute name has been changed back to onselect.
- size—This attribute has been renamed iconSize.
- Additionally, the expression to determine the selected menu item has changed from event.detail.target to event.detail.menuItem.
- The following attributes have been changed.
- The checked attribute value now defaults to false.
- The step attribute has been changed from Decimal type to Object. This attribute now supports any as a value to allow any float value in a user’s input.
- The onSelect attribute name has been changed back to onselect. Additionally, the expression to determine the selected tab has changed from event.detail.target to event.detail.selectedTab.
- This component is no longer available in Winter ’17. Hang on tight!