HXL Lightning Types Reference

Headless Experience Layer (HXL) components use Lightning types in their property definitions. Each type defines the shape and allowed values of a property. The types describe layout, formatting, and structured data for HXL components. HXL renders each type natively on supported surfaces.

For input-focused Lightning types, see the Lightning Types Reference instead.

HXL Lightning types include:

• Layout and sizing types
• Content and display types
• Interaction types
• Table types

Control how components are sized, spaced, aligned, and positioned within their containers.

Use the lightning__alignmentType type to control the cross-axis alignment of a container’s children. The type is a string enumeration.

For Use In

Agentforce, ChatGPT, Claude, Slackbot

The lightning__alignmentType type accepts these values. The default is stretch.

Use the lightning__extentType type to specify how much space a block occupies within its container. The type is a string enumeration.

For Use In

Agentforce, ChatGPT, Claude, Slackbot

The lightning__extentType type accepts these values. The default is auto.

Use the lightning__gapType type to control the space between child elements in a container. The type is a string enumeration.

For Use In

Agentforce, ChatGPT, Claude, Slackbot

The lightning__gapType type accepts these values. The default is md.

Use the lightning__sizeType type to specify the size of a block on a shared t-shirt-size scale. The type is a string enumeration.

For Use In

Agentforce, ChatGPT, Claude, Slackbot

The lightning__sizeType type accepts these values. The default is md.

Use the lightning__orientationType type to set the layout orientation of a component. The type is a string enumeration.

For Use In

Agentforce, ChatGPT, Claude, Slackbot

The lightning__orientationType type accepts these values. The default is horizontal.

Use the lightning__justifyType type to control the horizontal distribution of children within a container. The type is a string enumeration.

For Use In

Agentforce, ChatGPT, Claude, Slackbot

The lightning__justifyType type accepts these values. The default is start.

Use the lightning__positionType type to specify a preferred position, such as the placement of a tooltip relative to its anchor. The type is a string enumeration.

For Use In

Agentforce, ChatGPT, Claude, Slackbot

The lightning__positionType type accepts these values. The default is top.

Format text, icons, and status indicators shown to users.

Use the lightning__iconName type to specify a semantic icon identifier. Renderers map this identifier to a concrete icon in their own icon system. The type is a string enumeration.

For Use In

Agentforce, ChatGPT, Claude, Slackbot

The lightning__iconName type accepts these values.

For available icons, see the HXL Playground Editor.

Use the lightning__markdownTextType type for text content formatted as Markdown. The type corresponds to the string type in a JSON schema.

For Use In

Agentforce, ChatGPT, Claude, Slackbot

The lightning__markdownTextType type supports these configurable keywords.

Use the lightning__textalignType type to control the horizontal alignment of text content. The type is a string enumeration.

For Use In

Agentforce, ChatGPT, Claude, Slackbot

The lightning__textalignType type accepts these values. The default is left.

Use the lightning__severityType type to indicate an alert type or severity level. The type is a string enumeration.

For Use In

Agentforce, ChatGPT, Claude, Slackbot

The lightning__severityType type accepts these values. The default is info.

Describe the events dispatched when a user interacts with a component.

Use the lightning__actionType type to describe an action performed when a user interacts with a component. Because lightning__actionType is a complex type, its value is represented as an object.

This table shows the properties of the object that the lightning__actionType type describes.

For Use In

Agentforce, ChatGPT, Claude, Slackbot

HXL provides these predefined actions. Each is identified by its definition value and takes a specific set of attributes.

The action/openLink action opens a URL in the browser. It executes synchronously to preserve the user gesture context that the browser requires to open a window.

The action/openLink action takes these attributes.

This example shows a button that opens a link when clicked.

1{
2  "definition": "tile/button",
3  "attributes": {
4    "label": "Open Link",
5    "variant": "primary",
6    "actions": {
7      "click": [
8        {
9          "definition": "action/openLink",
10          "attributes": {
11            "url": "https://www.example.com"
12          }
13        }
14      ]
15    }
16  }
17}

The action/sendMessage action sends a message to the host or agent. The message goes directly to the agent rather than being displayed to the user. The agent processes it like a user message and responds with results. The agent may ask for confirmation before executing risky actions.

The action/sendMessage action takes these attributes.

This example shows a button that sends a message when clicked.

1{
2  "definition": "tile/button",
3  "attributes": {
4    "label": "Yes, proceed",
5    "actions": {
6      "click": [
7        {
8          "definition": "action/sendMessage",
9          "attributes": {
10            "content": "Yes, proceed with the update"
11          }
12        }
13      ]
14    }
15  }
16}

Use the lightning__eventType type to describe an event dispatched when a user interacts with a tile. Because lightning__eventType is a complex type, its value is represented as an object.

This table shows the properties of the object that the lightning__eventType type describes.

For Use In

Agentforce, ChatGPT, Claude, Slackbot

This example shows an event with a definition and event-specific attributes.

1{
2  "definition": "myAction",
3  "attributes": {
4    "recordId": "001XXXXXXXXXXXXXXX"
5  }
6}

Structure the columns and cell values rendered by the table component.

The table types define how the tile/table component structures its columns and cells. Each column type is a discriminated object identified by its type property.

Use the lightning__cellValueType type to represent a single table cell value. A cell holds exactly one value at a time — a string or a number, but never both.

For Use In

Agentforce, ChatGPT, Claude, Slackbot

The lightning__cellValueType type accepts one of these value types.

Use the lightning__dateColumnType type to format table cell values as localized dates or datetimes. The type accepts ISO 8601 strings (for example, 2024-01-15T14:30:00Z or 2024-01-15) and numeric Unix timestamps in milliseconds (for example, 1705312200000). Non-parseable cell values fall back to plain text display.

For Use In

Agentforce, ChatGPT, Claude, Slackbot

Because lightning__dateColumnType is a complex type, its value is represented as an object.

This table shows the properties of the object that the lightning__dateColumnType type describes.

This example shows a date column that displays both date and time.

1{
2  "type": "date",
3  "format": "datetime",
4  "dateStyle": "medium",
5  "timeStyle": "short"
6}

Use the lightning__numberColumnType type to format numeric table cell values with locale-aware decimal, percent, or currency formatting. Row values must be raw numeric strings,for example, 1234.56 or 0.75. The renderer handles all formatting. Non-numeric cell values fall back to plain text display.

For Use In

Agentforce, ChatGPT, Claude, Slackbot

Because lightning__numberColumnType is a complex type, its value is represented as an object.

This table shows the properties of the object that the lightning__numberColumnType type describes.

This example shows a currency column formatted in euros.

1{
2  "type": "number",
3  "format": "currency",
4  "currencyCode": "EUR",
5  "currencyDisplayAs": "symbol",
6  "minimumFractionDigits": 2,
7  "maximumFractionDigits": 2
8}

Use the lightning__linkColumnType type to render table cell values as clickable hyperlinks. When applied to a column, cell values become anchor elements.

For Use In

Agentforce, ChatGPT, Claude, Slackbot

Because lightning__linkColumnType is a complex type, its value is represented as an object.

This table shows the properties of the object that the lightning__linkColumnType type describes.

This example shows a link column that displays a person’s name and links to a separate profile URL.

1{
2  "type": "link",
3  "urlKey": "profileUrl"
4}

Use the lightning__picklistColumnType type to render table cell values by resolving row data values to human-readable labels from a defined set of options. Each cell value in row data is a canonical value string that maps to a label from the options array. The table displays the label. When a row value doesn’t match any option, the raw value is displayed as a fallback.

For Use In

Agentforce, ChatGPT, Claude, Slackbot

Because lightning__picklistColumnType is a complex type, its value is represented as an object.

This table shows the properties of the object that the lightning__picklistColumnType type describes.

This example shows a picklist column that maps status values to labels.

1{
2  "type": "picklist",
3  "options": [
4    { "label": "Active", "value": "active" },
5    { "label": "Inactive", "value": "inactive" }
6  ]
7}

Use the lightning__picklistOptionType type to define a single picklist option with a display label and a canonical data value. This type is the item type in a picklist column’s options array. Separating the label from the value supports localization (labels change per locale, values stay constant) and programmatic operations such as filtering and sorting.

For Use In

Agentforce, ChatGPT, Claude, Slackbot

Because lightning__picklistOptionType is a complex type, its value is represented as an object.

This table shows the properties of the object that the lightning__picklistOptionType type describes.

This example shows a single picklist option.

1{
2  "label": "In Progress",
3  "value": "in_progress"
4}