Skip to main contentCarbon Design System

File uploader

Color

Use the primary button for the “Add file” button.

ClassPropertyColor token
.bx--file--labeltext color$text-01
.bx--label-descriptiontext color$text-02
.bx--file-filenamecolor$text-01
.bx--file__selected-filebackground$ui-01
.bx--file-closefill$icon-01
.bx--file__drop-containerborder$ui-04
.bx--file__drop-containertext$link-01
Examples of file loader

Interactive states

Use the inline loading component active state for .bx--file__state-container loading status.

ClassPropertyColor token
.bx--file-close: focusborder$focus
.bx--file__drop-container: focusborder$focus
.bx--file__state-container: completesvg$interactive-04
.bx--file-invalidsvg$support-01
.bx--file__selected-file--invalidborder$support-01
.bx--form-requirement__titletext color$support-01
.bx--form-requirement__supplementtext color$text-01
.bx--form-requirementborder-top$ui-03
.bx--file--label--disabledtext color$disabled-02
.bx--file__drop-container: disabledtext color$disabled-02
.bx--file__drop-container: disabledborder$disabled-02
Examples of file loader file states

Selected file states: loading, complete, focus, invalid.

Examples of drag and drop file uploader states

Drag and drop file uploader states.

Typography

The file uploader label and instruction text should be set in sentence case, with only the first letter of the first word in the sentence capitalized.

ClassFont-size (px/rem)Font-weightType token
.bx--file--label14 / 0.875Semi-bold / 600$heading-01
.bx--label-description14 / 0.875Regular / 400$body-short-01
.bx--file-filename14 / 0.875Regular / 400$body-short-01
.bx--file__drop-container#text14 / 0.875Regular / 400$body-short-01

Structure

The width of an uploaded file varies based on the content and layout of a design. Refer to the button guidelines for usage and styling of the “Add files” button.

ClassPropertypx / remSpacing token
.bx--file-filenameheight48 / 3
.bx--file-filenamewidth288 / 18
.bx--file__selected-file--fieldheight40 / 2.5
.bx--file__selected-file--smheight32 / 2
.bx--file__selected-filepadding-left16 / 1$spacing-05
.bx--file__selected-filemargin-bottom8 / 0.5$spacing-03
.bx----file__state-containerpadding-right16 / 1$spacing-05
.bx--file-closeheight, width16 / 1
.bx--file-closemargin-left, margin-right16 / 1$spacing-05
Structure and spacing measurements for file uploader

Structure and spacing measurements for file uploader | px / rem

Structure and spacing measurements for drage and drop file uploader

Structure and spacing measurements for drag and drop file uploader | px / rem