Introduction
Design PrinciplesAccessibility
Foundation
ColorGridIconographyIllustrationsShadowsTypography
Product Writing Guide
OverviewProduct's PersonalityBest PracticesInclusive LanguageWriting AccessiblyWriting GloballyWriting for AIGrammar RulesGlossaries
Components
ACTIONS
ButtonDropdownDropdown FlyoutToggle ButtonSegmented Controller
DISPLAY
AvatarAvatar StackContact ItemFile ListPillTokenThumbnail
INPUT
CheckboxDate SelectDropzoneFile SelectGroup SelectMenuMulti SelectNumber/Currency InputPill SelectRadio ButtonSingle SelectSliderSwitchText AreaText Editor (RTF)Text InputTiered Select
LOADING
Progress BarSpinner
MESSAGING
BannerEmpty StateToastTooltip
navigation
BreadcrumbsLinkPaginationSearchTabsTree
overlays & surfaces
CardModalPanelPopoverTearsheet
Layouts
DetailEmailPage TemplateRelated ItemsTool Landing Layout
Patterns
Content FlowFormForm Empty StateIn-Line Error ValidationOverlay UsageTitle LockupEmail Notifications
Views
Data Table
Data TableCells & RowsLocation Filter
Lists vs. TablesTile
Other Resources
Development Resources

File List

If you need to display attachments in a page or form, use the file list component.

Demo and Developer Guidelines

Anatomy

Behavior

Links should open an overlay preview (often called a "lightbox") with download options (either individual or bulk) inside.
Core React does not have a component dedicated to previewing media today. Despite that, using an older lightbox, or even previews within the default browser, is still the preferred experience. If you can, please contribute a lightbox to help us close this gap and improve the design system!
Correct
Download options live within the overlay.
Incorrect
Design Systems does not recommend displaying download buttons in the list, either in bulk, or for individual rows. The existing Core React component offers this functionality to support legacy experiences, but if you can avoid it, please do!
Correct
File types that cannot be previewed should also open a lightbox, with an empty state explaining why a preview is unavailable.
Incorrect
Don’t treat these types of files differently. Instead, open a lightbox clearly explaining everything.

Contribution

We’re looking for support adding the following features to File List:
File name truncation, so that file names do not wrap onto many lines
File types that cannot be previewed should also open a lightbox, with an empty state explaining why a preview is unavailable.
We are also interested in accessibility improvements, specifically using the arrow keys to navigate this list instead of tab, so that keyboard users do not get trapped.

Finally, a separate lightbox component (a modal or overlay with a file preview) will help improve this experience and break away from reliance on older patterns.