New and Changed Lightning Web Components

Spring ’19 introduces a new type of Lightning component called a Lightning web component. What we used to call a Lightning component we now call an Aura component. Aura components and Lightning web components work together and are both part of the Lightning Component framework.

New Components

These Lightning web components are generally available to all developers.

Buttons

These components provide different button flavors.

lightning-button
A button element that executes an action.
lightning-button-icon
An icon-only HTML button.
lightning-button-icon-stateful
An icon-only button that retains state.
lightning-button-group
Represents a group of buttons. This component is a container for lightning-button, which collectively create a navigation bar.
lightning-button-menu
A dropdown with a list of actions or functions. This component nests lightning-menu-item to create a menu item in the dropdown.
lightning-button-stateful
A button that switches between states.

Data Entry

Use these components for data entry.

lightning-checkbox-group
Enables selection of single or multiple options.
lightning-combobox
A widget that provides an input field that is read-only, accompanied by a dropdown of selectable options.
lightning-dual-listbox
A widget that provides an input listbox, accompanied with a listbox of selectable options.
lightning-file-upload
A file uploader for uploading and attaching files to records.
lightning-helptext
An icon with a text pop over that’s used as a tooltip.
lightning-input
Interactive controls that accept user input depending on the type attribute.
lightning-input-address
An address compound field that contains fields such as street and city.
lightning-input-location
A geolocation compound field that accepts a latitude and longitude value.
lightning-input-name
A name compound field that contains fields such as salutation and suffix.
lightning-input-rich-text
A WYSIWYG editor with a customizable toolbar for entering rich text.
lightning-radio-group
Enables selection of a single option.
lightning-slider
An input range slider for specifying a value between two specified numbers.
lightning-textarea
A multiline text input field.

Displaying Data

Use these components to display data.

lightning-click-to-dial
A formatted phone number that’s click-to-dial enabled or disabled for Open CTI and Voice.
lightning-datatable
A table that displays columns of data, formatted according to type.
lightning-formatted-address
A formatted address that provides a link to the given location on Google Maps.
lightning-formatted-date-time
A date and time that can be displayed in different formats.
lightning-formatted-email
An email as a hyperlink with the mailto: URL scheme.
lightning-formatted-location
A geolocation in decimal degrees (DD) using the format [latitude, longitude].
lightning-formatted-name
A formatted name that can include a salutation and suffix.
lightning-formatted-number
A number that can be displayed as a decimal, currency, or percentage.
lightning-formatted-phone
A phone number as a hyperlink with the tel: URL scheme.
lightning-formatted-rich-text
Rich text that’s formatted with whitelisted tags and attributes. Other tags and attributes are removed and only their text content is displayed.
lightning-formatted-text
Text that replaces newlines with line breaks, and supports href linking.
lightning-formatted-time
A time that can be displayed in different formats.
lightning-formatted-url
Displays a URL as a hyperlink.
lightning-relative-date-time
Displays the relative time difference between the source date-time and the provided date-time.
lightning-tree
A nested tree that displays visualization of a structural hierarchy, such as a sitemap for a website or a role hierarchy in an organization.
lightning-tree-grid
A hierarchical view of data in a table.

Forms

Use these components to edit and view records.

lightning-record-edit-form
A record edit layout that displays one or more fields.
This component nests lightning-input-field to display fields.
lightning-record-form
An editable form or display form for a record.
lightning-record-view-form
A record view that displays one or more fields. This component nests lightning-output-field to display fields.

Layout

Use these components to organize content in various layouts.

lightning-accordion
A collection of vertically stacked sections with multiple content areas. This component nests lightning-accordion-section to create sections.
lightning-card
A container around a related group of information.
lightning-layout
A responsive grid system for arranging containers on a page. This component nests lightning-layout-item to group information together, which defines visual grids, spacing, and sections.
lightning-tabset
A list of tabs. This component nests lightning-tab to keep related content in a single container.
lightning-tile
Groups related information associated with a record.

Navigation

Use these components for navigation.

lightning-breadcrumbs
A hierarchy path of the page you're currently visiting within the website or app. This component nests lightning-breadcrumb to create an item in the hierarchy path.
lightning-vertical-navigation
A vertical list of links that takes the user to another page or parts of the page the user is on. This component nests the following components to create link items and sections.
  • lightning-vertical-navigation-item
  • lightning-vertical-navigation-item-badge
  • lightning-vertical-navigation-item-icon
  • lightning-vertical-navigation-overflow
  • lightning-vertical-navigation-section

Visual

Use these components to add visual context.

lightning-avatar
A visual representation of an object, such as an image of an account or user.
lightning-badge
A label that holds a small amount of information, such as the number of unread notifications.
lightning-carousel
A collection of images that are displayed one at a time. This component nests lightning-carousel-image to create carousel images.
lightning-dynamic-icon
Animated icons that are displayed with different states.
lightning-icon
A visual element that provides context and enhances usability.
lightning-map
Displays a map of one or more locations.
lightning-pill-container
A list of pills grouped in a container. This component is a container for lightning-pill to create individual pills. A pill contains a label with a link that can be removed from view.
lightning-progress-indicator
Provides a visual indication on the progress of a particular process. This component nests lightning-progress-step to create progress steps.
lightning-spinner
Displays an animated spinner.