Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

File uploader

Color

ClassPropertyColor token
.bx--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

Interactive states

ClassPropertyColor token
File name: invalidtext color$disabled-02
Error messagetext color$support-01
.bx--file-filenameborder-bottom$support-01

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--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

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-filenameheight40 / 2.5
.bx--file-filenamewidth224 / 14
.bx--file__selected-filepadding-left16 / 1$spacing-03
.bx--file__selected-filemargin-bottom8 / 0.5$spacing-05
Structure and spacing measurements for file uploader

Structure and spacing measurements for file uploader | px / rem

The following specs are not built into the file uploader component but are recommended by design as the proper amount between file uploader elements.

ClassPropertypx / remSpacing token
.bx--file-closeheight, width16 / 1
.bx--file-closemargin-left, margin-right16 / 1$spacing-05