Introducing Base Lightning Components

Base Lightning components are the building blocks that make up the modern Lightning Experience, Salesforce1, and Lightning Communities user interfaces.

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.

Note

Note

This release contains a beta version of a few components that are production quality but have known limitations. This feature isn’t generally available unless or until Salesforce announces its general availability in documentation or in press release or public statements. We can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only based on generally available products and features. You can provide feedback and suggestions for this feature in the IdeaExchange.

The following components are new. For more information on these components, refer to the Lightning Components Developer Guide.

lightning:badge
A label that holds a small amount of information, such as the number of unread notifications.
lightning:button
A button element. Buttons can be either a label only, label and icon, body only, or body and icon.
lighting:buttonGroup
Represents a set of buttons that can be displayed together to create a navigational bar.
lightning:buttonIcon
An icon-only HTML button.
lightning:buttonMenu (Beta)
Represents a button that when clicked displays a dropdown menu of actions.
lightning:card
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.
lighting:icon
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.
lightning:layout
Represents a responsive grid system for arranging containers on a page.
lightning:layoutItem
An item in a lightning:layout.
lightning:menuItem (Beta)
Represents a menu item within the lightning:buttonMenu dropdown component.
lightning:select
Creates an HTML select element.
lightning:spinner
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.
lightning:textarea
Represents a multiline text input.

Changed Components

The following components have changed since the initial release.

lightning:button
The following attributes are new.
  • 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.
lightning:card
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.
lightning:buttonIcon
The following attributes are new.
  • 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.
lightning:buttonMenu
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.
lightning:input
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.
lightning:tabset
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.
lightning:tooltip
This component is no longer available in Winter ’17. Hang on tight!