Skip to main contentCarbon Design System

File uploader


ElementPropertyColor token
ButtonSee primary button
Drop zone texttext-color$link-primary
Drop zone containerborder$border-strong
File nametext-color$text-primary
File containerbackground-color$field *
Delete iconsvg$icon-primary

* Denotes a contextual color token that will change values based on the layer it is placed on.

Examples of file loader

Interactive states

StateElementPropertyColor token
HoverDrop zone texttext-colorlink-primary
Drop zone containerborder$focus
FocusDelete iconborder$focus
Drop zone containerborder$focus
LoadingLoaderSee inline loading
UploadedCheckmark iconsvg$interactive
Error titletext-color$text-primary
Error messagetext-color$text-error
Warning iconsvg$support-error
Drop zone texttext-color$text-disabled
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.


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

ElementFont-size (px/rem)Font-weightType token
Heading14 / 0.875SemiBold / 600$heading-compact-01
Description14 / 0.875Regular / 400$body-compact-01
Error message12 / 0.75Regular / 400$label-01
Drop zone text14 / 0.875Regular / 400$body-compact-01
File name14 / 0.875Regular / 400$body-compact-01


The width of an uploaded file varies based on the content and layout of a design.

ElementPropertypx / remSpacing token
Filewidth288 / 18
padding-left16 / 1$spacing-05
margin-bottom8 / 0.5$spacing-03
padding-right16 / 1$spacing-05
Delete iconheight, width16 / 1
margin-left, margin-right16 / 1$spacing-05
ButtonSee primary button
Structure and spacing measurements for file uploader

Structure and spacing measurements for file uploader | px / rem

Structure and spacing measurements for drag and drop file uploader

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


The file and button heights should always match.

ElementSizeHeight px / rem
FileSmall (sm)32 / 2
Medium (md)40 / 2.5
Large (lg)48 / 3
ButtonSmall (sm)32 / 2
Medium (md)40 / 2.5
Large (lg)48 / 3
Sizes for file and button

File and button sizes | px / rem