Standard Components

Attachments

Built

Displays files and documents attached to the current record. Each row shows a file type icon, filename, size, uploader, and upload date. Supports an inline upload action for adding new files directly from the card.

Author: Design TeamUpdated: 2026-03-06

Usage Guidance

When to use

  • +Displaying supporting documents on job, account, or project records where users need quick access to files.
  • +Providing inline upload capability so field workers or administrators can attach files without navigating away from the record.
  • +Showing a summary of recent uploads with a link to the full attachment list.

When not to use

  • −For rich media galleries with image previews and thumbnails — use a dedicated Media Gallery component instead.
  • −When file management requires folder organization or complex hierarchies — use a full document management view.
  • −For single-file fields where only one attachment is expected — use an inline file picker input instead of a list component.

Breeze UI Adherence

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

Tokens Used

color5 tokens
color.border.default
Card border, row dividers, footer divider
border-color
color.background.surface
Card background
background-color
color.text.default
Card header title, filename text
color
color.text.subtle
Metadata subtitle text (size, uploader, date)
color
color.interactive.default
View All link text
color
spacing2 tokens
spacing.5
Header, row, and footer horizontal padding (20px)
padding-inline
spacing.3
Row vertical padding (12px)
padding-block
sizing1 token
spacing.3.5
Header and footer height (56px / 3.5rem)
height
typography3 tokens
font.size.sm
Header title, filename, View All link (14px)
font-size
font.weight.semibold
Header title weight (600)
font-weight
font.size.xs
Metadata subtitle text (12px)
font-size
radius1 token
radius.lg
Card corner radius (8px)
border-radius
shadow1 token
shadow.sm
Card elevation shadow
box-shadow

Custom CSS — not covered by Breeze UI

⚠File type icon container
bg-red-50 text-red-500 / bg-blue-50 text-blue-500 / bg-gray-100 text-gray-400

File type icon color mapping based on MIME type. Breeze UI does not provide semantic file-type color tokens — custom Tailwind color classes are used to visually distinguish PDF, DOCX, image, and generic file types.

⚠Filename and subtitle text
truncate (text-overflow: ellipsis; white-space: nowrap; overflow: hidden)

Filename and metadata subtitle truncation. Breeze UI does not provide a text-overflow token — Tailwind's truncate utility is used to prevent long filenames from breaking the row layout.

⚠Add Files button
h-8 px-3 text-sm border border-gray-200 rounded-md

Compact header action button styling. Breeze UI's Button component does not expose a 32px compact variant suitable for card headers — custom sizing matches the header height proportions.

⚠File type icon wrapper
w-10 h-10 rounded-lg (icon container)

Fixed 40px icon container with 8px radius. Breeze UI does not have a file-type icon container component — custom sizing ensures consistent icon presentation across all file types.

Widths
1/31/2defaultFull
Object Pages
JobsAccountsActivitiesProjects

Settings

allowedFileTypestext

Comma-separated list of accepted file extensions (e.g., '.pdf,.jpg,.docx'). Use '*' to accept all file types.

Default: *
maxFileSizenumber

Maximum file size in megabytes allowed for uploads.

Default: 25
maxRowsnumber

Maximum number of attachment rows to display before showing the 'View All' link.

Default: 5
showUploadButtonboolean

Display the 'Add Files' upload button in the card header.

Default: true
sortByselect

Default sort order for the attachments list.

Default: date_desc
date_descdate_ascname_ascname_descsize_desc

Attributes

attachmentsAttachment[]

Array of file attachments linked to the record. Each contains fileName, fileSize, mimeType, uploadedBy, and uploadedAt.

{ fileName: string, fileSize: number, mimeType: string, uploadedBy: string, uploadedAt: string }
totalCountnumber

Total number of attachments on the record. Shown in the header count badge.

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 Breeze UI token mapping and adherence tracking. Defined file type icon color scheme, upload flow, and security constraints.