Skip to main content




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 style
.bx--label14 / 0.875Semi-Bold / 600.bx--type-zeta
.bx--label-description14 / 0.875Normal / 400-
.bx--file-filename12 / 0.75Normal / 400.bx--type-caption


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

ClassPropertypx / remSpacing token
.bx--file-filenameheight30 / 1.875-
.bx--file__selected-filepadding-left, padding-right16 /1$spacing-md
.bx--file__selected-filemargin-bottom16 /1$spacing-md

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

Recommended structure and spacing measurements for File Uploader | px / rem