Skip to main contentCarbon Design System

File uploader

Color

ElementPropertyColor token
Headingtext-color$text-primary
Descriptiontext-color$text-secondary
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
InvalidFileborder$support-error
Error titletext-color$text-primary
Error messagetext-color$text-error
Warning iconsvg$support-error
Dividerborder-top$border-subtle
DisabledLabeltext-color$text-disabled
Descriptiontext-color$text-disabled
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.

Typography

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

Structure

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 with multiple file upload functionality

Structure and spacing measurements for drag and drop with multiple file upload functionality | px / rem

Structure and spacing measurements for drag and drop with single file upload functionality

Structure and spacing measurements for drag and drop with single file upload functionality | px / rem

Sizes

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