Bronze UI

Overview

Images display visual content such as photos, illustrations, logos, or previews. They help users recognize content quickly while preserving a reliable experience when loading is delayed or a source fails.

<Image source="https://..." description="..." width={1920} height={1280} />

Usage Guidelines

Write a clear descriptions: Use description to convey the image's meaning in an accessible way. Keep it concise and focused on the image's content or purpose.
Keep image dimensions stable: Provide width and height when possible, so the page layout remains stable as images load.
Use fallback intentionally: Use fallbackSource when a reliable backup image exists, and fallback for intentional replacement UI such as an empty state or placeholder.

API Reference

`Image`

Prop	Type	Default
`source`	`string`	-
`fallbackSource`	`string`	-
`fallback`	`ReactNode`	-
`onStatusChange`	`(status: "empty" \| "loading" \| "loaded" \| "error") => void`	-
`description`	`string`	-
`draggable`	`boolean`	`false`
`onLoad`	`(event: SyntheticEvent<HTMLImageElement>) => void`	-
`onError`	`(event: SyntheticEvent<HTMLImageElement>) => void`	-

Examples

Fallback

If an image fails to load, <Image /> can display a fallback source or even an entire fallback component in place of the browser's default broken image icon.

<Image source="..." fallback={<CustomComponent />} />

Overview

Usage Guidelines

API Reference

Image

Examples

Fallback

Overview

Components

`Image`