New and Changed Lightning Web Components
These Lightning web components are generally available to all developers.
These components provide different button flavors.
- A button element that executes an action.
- An icon-only HTML button.
- An icon-only button that retains state.
- Represents a group of buttons. This component is a container for lightning-button, which collectively create a navigation bar.
- A dropdown with a list of actions or functions. This component nests lightning-menu-item to create a menu item in the dropdown.
- A button that switches between states.
Use these components for data entry.
- Enables selection of single or multiple options.
- A widget that provides an input field that is read-only, accompanied by a dropdown of selectable options.
- A widget that provides an input listbox, accompanied with a listbox of selectable options.
- A file uploader for uploading and attaching files to records.
- An icon with a text pop over that’s used as a tooltip.
- Interactive controls that accept user input depending on the type attribute.
- An address compound field that contains fields such as street and city.
- A geolocation compound field that accepts a latitude and longitude value.
- A name compound field that contains fields such as salutation and suffix.
- A WYSIWYG editor with a customizable toolbar for entering rich text.
- Enables selection of a single option.
- An input range slider for specifying a value between two specified numbers.
- A multiline text input field.
Use these components to display data.
- A formatted phone number that’s click-to-dial enabled or disabled for Open CTI and Voice.
- A table that displays columns of data, formatted according to type.
- A formatted address that provides a link to the given location on Google Maps.
- A date and time that can be displayed in different formats.
- An email as a hyperlink with the mailto: URL scheme.
- A geolocation in decimal degrees (DD) using the format [latitude, longitude].
- A formatted name that can include a salutation and suffix.
- A number that can be displayed as a decimal, currency, or percentage.
- A phone number as a hyperlink with the tel: URL scheme.
- Rich text that’s formatted with whitelisted tags and attributes. Other tags and attributes are removed and only their text content is displayed.
- Text that replaces newlines with line breaks, and supports href linking.
- A time that can be displayed in different formats.
- Displays a URL as a hyperlink.
- Displays the relative time difference between the source date-time and the provided date-time.
- A nested tree that displays visualization of a structural hierarchy, such as a sitemap for a website or a role hierarchy in an organization.
- A hierarchical view of data in a table.
Use these components to edit and view records.
- A record edit layout that displays one or more fields.
- This component nests lightning-input-field to display fields.
- An editable form or display form for a record.
- A record view that displays one or more fields. This component nests lightning-output-field to display fields.
Use these components to organize content in various layouts.
- A collection of vertically stacked sections with multiple content areas. This component nests lightning-accordion-section to create sections.
- A container around a related group of information.
- 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.
- A list of tabs. This component nests lightning-tab to keep related content in a single container.
- Groups related information associated with a record.
Use these components for navigation.
- 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.
- 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.
Use these components to add visual context.
- A visual representation of an object, such as an image of an account or user.
- A label that holds a small amount of information, such as the number of unread notifications.
- A collection of images that are displayed one at a time. This component nests lightning-carousel-image to create carousel images.
- Animated icons that are displayed with different states.
- A visual element that provides context and enhances usability.
- Displays a map of one or more locations.
- 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.
- Provides a visual indication on the progress of a particular process. This component nests lightning-progress-step to create progress steps.
- Displays an animated spinner.