UI Components

AttachmentIcon

src/components/AttachmentIcon.tsx

An icon of a paperclip, which is used as the default icon for FileUploadButton

CloseIcon

src/components/CloseIcon.tsx

FileIcon

src/components/FileIcon/FileIcon.tsx

Prop name	Type	Default	Description
`big`	boolean
`className`	string
`filename`	string
`mimeType`	string
`size`	number
`sizeSmall`	number
`type`	IconType
`version`	IconVersion

File Icons V1

Small icons (can have custom width & height)

Big icons (can have custom width & height)

File Icons V2

Standard icons (can be big / small / custom width & height)

Alternative icons (can be big / small / custom width & height)

FilePdfIcon

src/components/FileIcon/FileIconSet/v1.tsx

Prop name	Type	Default	Description
`size`	number	`20`

FilePdfIcon

src/components/FileIcon/FileIconSet/v2.tsx

Prop name	Type	Default	Description
`mimeType`	string
`size`	number	`40`
`type`	union
`className`

FilePlaceholder

src/components/FilePlaceholder.tsx

FilePreviewer

src/components/FilePreviewer.tsx

Component that displays files which are being uploaded

Prop name	Type	Default	Description
`fileIconProps`	FileIconProps	`{}`
`uploads`	FileUpload[]
`handleRemove`	function
`handleRetry`	function
`handleFiles`	function

FileUploadButton

src/components/FileUploadButton.tsx

Prop name	Type	Default	Description
`disabled`		`false`
`multiple`		`false`
`children`		`<AttachmentIcon />`
`resetOnChange`		`true`

With the default image

With custom display

Upload files here

IconButton

src/components/IconButton.tsx

This is simply a button wrapper, adds a div with role="button" and a onClick

IconButton

ImageDropzone

src/components/ImageDropzone.tsx

ImagePreviewer

src/components/ImagePreviewer.tsx

Prop name	Type	Default	Description
`imageUploads`	ImageUpload[]		The list of image uploads that should be displayed
`handleRemove`	function		A callback to call when the remove icon is clicked
`handleRetry`	function		A callback to call when the retry icon is clicked
`handleFiles`	function		A callback to call with newly selected files. If this is not provided no `ThumbnailPlaceholder` will be displayed.
`multiple`	boolean	`true`	Allow drag 'n' drop (or selection from the file dialog) of multiple files
`disabled`	boolean	`false`

ImagePreviewer

ImageUploadButton

src/components/ImageUploadButton.tsx

Prop name	Type	Default	Description
`multiple`		`false`
`disabled`		`false`
`children`		`<PictureIcon />`
`resetOnChange`		`false`

With the default image

With custom display

Upload images here

LoadingIndicator

src/components/LoadingIndicator.tsx

Prop name	Type	Default	Description
`color`	string
`backgroundColor`	string
`size`	number	`20`
`width`	number	`2`

PictureIcon

src/components/PictureIcon.tsx

An icon of a picture, which is used as the default icon for ImageUploadButton

RetryIcon

src/components/RetryIcon.tsx

Thumbnail

src/components/Thumbnail.tsx

Prop name	Type	Default	Description
`handleClose`	MouseEventHandler<HTMLButtonElement>
`size`	number	`100`
`image`	string	Required
`alt`	string
`id`	string

Thumbnail

ThumbnailPlaceholder

src/components/ThumbnailPlaceholder.tsx

Prop name	Type	Default	Description
`handleFiles`	function	Required
`multiple`	boolean	`false`