FileUpload Theming

Theming documentation for FileUpload component

Styled#

FileUpload CSS Classes#

List of class names used in the styled mode.

classNamedescription
p-fileuploadClass name of the root element
p-fileupload-contentClass name of the content element
p-fileupload-file-listClass name of the file list element
p-fileupload-fileClass name of the file element
p-fileupload-file-thumbnailClass name of the file thumbnail element
p-fileupload-file-infoClass name of the file info element
p-fileupload-file-nameClass name of the file name element
p-fileupload-file-sizeClass name of the file size element
p-fileupload-file-actionsClass name of the file actions element

Design Tokens#

List of design tokens.

tokenCSS Variabledescription
fileupload.background
--p-fileupload-background
Background of root
fileupload.border.color
--p-fileupload-border-color
Border color of root
fileupload.color
--p-fileupload-color
Color of root
fileupload.border.radius
--p-fileupload-border-radius
Border radius of root
fileupload.transition.duration
--p-fileupload-transition-duration
Transition duration of root
fileupload.header.background
--p-fileupload-header-background
Background of header
fileupload.header.color
--p-fileupload-header-color
Color of header
fileupload.header.padding
--p-fileupload-header-padding
Padding of header
fileupload.header.border.color
--p-fileupload-header-border-color
Border color of header
fileupload.header.border.width
--p-fileupload-header-border-width
Border width of header
fileupload.header.border.radius
--p-fileupload-header-border-radius
Border radius of header
fileupload.header.gap
--p-fileupload-header-gap
Gap of header
fileupload.content.highlight.border.color
--p-fileupload-content-highlight-border-color
Highlight border color of content
fileupload.content.padding
--p-fileupload-content-padding
Padding of content
fileupload.content.gap
--p-fileupload-content-gap
Gap of content
fileupload.file.padding
--p-fileupload-file-padding
Padding of file
fileupload.file.gap
--p-fileupload-file-gap
Gap of file
fileupload.file.border.color
--p-fileupload-file-border-color
Border color of file
fileupload.file.info.gap
--p-fileupload-file-info-gap
Info gap of file
fileupload.file.list.gap
--p-fileupload-file-list-gap
Gap of file list
fileupload.progressbar.height
--p-fileupload-progressbar-height
Height of progressbar
fileupload.basic.gap
--p-fileupload-basic-gap
Gap of basic

Unstyled#

Theming is implemented with the pass through properties in unstyled mode.