Standard Components

Related List

Built

Displays a paginated list of related records linked to the current object. Each row shows key fields from the related record with optional badges and actions. Commonly used to surface contacts, assets, or child records on a parent detail page.

Author: Design TeamUpdated: 2026-03-06

Usage Guidance

When to use

  • +Displaying a short list of related records (contacts, assets, activities) on a parent object detail page.
  • +Providing quick access to linked records without navigating away from the current page.
  • +Surfacing key fields from child or junction objects in a scannable row format.

When not to use

  • −When the related data requires full table functionality — use a data table or grid component instead.
  • −When the parent object has no relationships to query — the component will always show an empty state.
  • −When inline editing of related records is required — use an editable grid component.

Breeze UI Adherence

85
Breeze UI Adherence
Excellent
85% of styling uses Breeze UI tokens

Tokens Used

color6 tokens
color.border.default
Card border, row dividers, avatar border
border-color
color.background.surface
Card background, row default background
background-color
color.text.default
Primary field name text, card header title
color
color.text.subtle
Subtitle text, secondary field values (email, phone)
color
color.text.link
View All link text (blue-500)
color
color.badge.green
Primary badge background (green-50) and text (green-700)
background-color, color
spacing2 tokens
spacing.3
Row vertical padding (12px)
padding-block
spacing.5
Row and header horizontal padding (20px)
padding-inline
typography3 tokens
font.size.sm
Primary name, secondary fields, View All link (14px)
font-size
font.weight.medium
Primary name weight (500)
font-weight
font.size.xs
Subtitle text, badge text (12px)
font-size
radius2 tokens
radius.lg
Card corner radius (8px)
border-radius
radius.full
Avatar circle, badge pill shape
border-radius
shadow1 token
shadow.sm
Card elevation shadow
box-shadow

Custom CSS — not covered by Breeze UI

⚠Secondary field cells
text-overflow: ellipsis; overflow: hidden; white-space: nowrap

Truncation on email and phone field columns to prevent row overflow. Breeze UI does not provide a text-truncation utility token.

⚠Avatar fallback circle
background: linear-gradient(135deg, #e5e7eb, #d1d5db)

Avatar fallback gradient when no profile image is available. Breeze UI does not provide gradient tokens for avatar placeholders.

⚠Row container
transition: background-color 150ms ease

Row hover highlight transition for smooth visual feedback. Breeze UI does not expose transition timing tokens.

Widths
1/2defaultFull
Object Pages
JobsAccountsActivitiesProjects

Settings

relatedObjecttext*

The related object to query records from. Must be a valid object with a relationship to the parent record.

Default: Contacts
displayFieldsjson*

An ordered array of field API names to display as columns in each row. The first field is rendered as the primary label.

Default: ["Name", "Email", "Phone"]
sortFieldtext

The field to sort records by. Determines the default ordering of the list.

Default: Name
sortDirectionselect

Sort order for the list records.

Default: asc
ascdesc
maxRowsnumber

Maximum number of rows to display before showing the 'View All' link. Range 1–20.

Default: 5
showAvatarboolean

Display an avatar icon at the start of each row derived from the record's image field or initials.

Default: true
badgeFieldtext

Optional field to render as a colored badge on the right side of each row. Leave empty to hide badges.

Attributes

recordsRelatedRecord[]

Array of related records resolved from the relatedObject query. Each record contains values for the fields specified in displayFields.

totalCountnumber

Total number of related records matching the relationship. Used to determine whether to show the 'View All' link.

recordIdstring

The UID of the parent record. Automatically bound by the page builder runtime.

Changelog

2026-03-01v1.0

Initial component specification created.

2026-03-06v1.1

Added badgeField setting for optional badge column support. Added Breeze UI token mapping and adherence tracking.