Skip to main contentCarbon Design System

File uploader

Color

ElementPropertyColor token
Labeltext-color$text-primary
Descriptiontext-color$text-secondary
File nametext-color$text-primary
Filebackground-color$field
Close iconsvg$icon-primary
Drop containerborder$border-strong
Drop texttext-color$link-primary
ButtonSee primary button
Examples of file loader

Interactive states

StateElementPropertyColor token
HoverDrop containerborder$focus
Drop texttext-colorlink-primary
FocusFileborder$focus
Drop 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 texttext-color$text-disabled
Drop containerborder$button-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
Label14 / 0.875Semi-bold / 600$productive-heading-01
Description14 / 0.875Regular / 400$body-short-01
File name14 / 0.875Regular / 400$body-short-01
Error message12 / 0.75Regular / 400$label-01
Drop text14 / 0.875Regular / 400$body-short-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
Close 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

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
File and button sizes

File and button sizes | px / rem