Working with 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.

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.

Input Control Components

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.

Visual Components

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

Field Components

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