HXL Components

Headless Experience Layer (HXL) components are the building blocks that you compose into experiences. Each component defines a single piece of content or layout structure that you can combine. HXL renders each component natively on each supported channel.

For the beta release, HXL components are supported for Agentforce, ChatGPT, Claude, and Slackbot.

Note

The HXL component reference lists UI components you can use to build widgets. Use the reference to find the right component for your content, layout, or interaction. Review a component’s page for its properties, known limitations, and usage examples.

For additional components that are in developer preview, see the HXL Playground. Developer preview components are for early access, and their APIs can still change. If you use developer preview components, we recommend that you use them in a sandbox org.

Accordion (tile/accordion)

Organizes content into vertically stacked, expandable sections. Each section has a header and nested content.
Accordion Item (tile/accordionItem)

Creates an individual expandable section within an accordion. Each section includes a clickable header with a title and optional icon.
Avatar (tile/avatar)

Identifies a user, entity, or object visually. An avatar contains the image URL, text initials, icon identifier, alternative text, shape, and size.
Badge (tile/badge)

Presents a small inline indicator for categorization or status.
Button (tile/button)

Shows a clickable element that triggers an action. A button includes semantic and visual variants, optional icon decoration, and the loading state.
Callout (tile/callout)

Highlights a content block for emphasis. The callout wraps child content with a semantic variant, optional title, and description.
Code (tile/code)

Shows preformatted source code content with an optional language label.
Column (tile/column)

Shows children components in a vertical container with a configurable gap, cross-axis alignment, and width.
Container (tile/container)

Creates a container with a rounded border that accepts any children.
Icon (tile/icon)

Shows a standalone icon.
Image (tile/image)

Shows an image based on a source URL, a required alternative text for accessibility, and an optional size proxy.
Link (tile/link)

Shows a text-based hyperlink with a destination URL. Configure the visual style as needed.
List (tile/list)

Lists a series of related items in a column. Use the tile/listitem child component for a list item.
List Item (tile/listItem)

Adds a single row inside a list. Use these children components: tile/text, tile/link, or tile/icon.
Markdown (tile/markdown)

Shows markdown-formatted text content. Use headings, lists, links, images, code blocks, tables, and standard inline formatting.
Progress (tile/progress)

Indicates the task completion percentage visually, which can be presented as a linear bar or circular ring shape.
Row (tile/row)

Shows children components in a horizontal container with a configurable gap, alignment, justification, and wrapping.

Separator (tile/separator)

Adds a visual boundary between content sections by using a horizontal or vertical line.
Spacer (tile/spacer)

Adds an empty layout element that creates explicit space or flexible fill between sibling components.
Spinner (tile/spinner)

Shows an indeterminate circular loading indicator. Configure the accessible label and an optional size setting on the spinner.
Table (tile/table)

Shows tabular data with column definitions and row data. Columns define the structure, and rows are key-value objects that map column keys to cell values.
Text (tile/text)

Shows text content with optional typography styling. Configure the appearance by using variant, weight, color, italic, and strikethrough settings.

HXL Components

See Also

Contents