The Asset component is a visual representation of an asset file such as a video or a PDF document. Use it when assets need to be presented to the user in a visual way but without necessarily showing the actual asset, for instance in a file selector, a drag-and-drop component, or when listing files. The Asset component composes the AssetIcon component.

Code examples

An image asset and an archived image asset

By default an asset with the type image will render the src attribute directly, like a HTML <img /> element.

If asset status is set to archived, an image icon is displayed instead of the actual image.

Props (API reference)

Name

Type

Default

className
string

CSS class to be appended to the root element

src
string

A `src` attribute to use for image assets

status
"archived"
"changed"
"deleted"
"draft"
"published"

The publish status of the asset

testId
string

A [data-test-id] attribute used for testing purposes

cf-ui-asset
title
string

The title of the asset

type
"archive"
"audio"
"code"
"image"
"markup"
"pdf"
"plaintext"
"presentation"
"richtext"
"spreadsheet"
"video"

The type of asset being represented

image