Placeholders

Tip

View source on GitHub →

For the complete list of props, use your IDE's autocomplete functionality.

Image placeholder

<ImagePlaceholder url='https://picsum.photos/200' />

Image display mode

<ImagePlaceholder
	url='https://picsum.photos/900/380'
	imageMode='contain'
/>

Sizes

<ImagePlaceholder
	url='https://picsum.photos/900/380'
	size='full'
/>

Styles

<ImagePlaceholder
	style='simple'
/>

No image (placeholder only)

This can also be achieved by not providing an url, but this should be a bit more performant as you don't have an <img> without a source.

<ImagePlaceholder
	noImage
/>

File placeholder

<FilePlaceholder
	fileName='demo.json'
	icon={file}
/>

Media placeholder

style and size works the same as in the ImagePlaceholder, so they won't be covered again.

<MediaPlaceholder icon={magicAlt} />

Help text

<MediaPlaceholder
	icon={experiment}
	style='simple'
	size='large'
	helpText='Lorem ipsum dolor.'
/>

<MediaPlaceholder
	icon={experiment}
	style='simple'
	size='large'
	helpText={
		<RichLabel
			icon={a11yWarning}
			label='Lorem ipsum dolor.'
		/>
	}
/>