Image API

API reference for the Image component: its props with their token values and defaults, the styled-system prop groups, and forwarded HTML attributes.

Demos

For usage examples, visit the component demo page: Image

Import

import { Image } from '@soroush.tech/design-system/Image'

Image-specific props

`src`

Primary image URL passed to the underlying <img> element.

`srcSet`

Forwarded to <img srcset> when src is present. Also used as the primary source when src is absent.

`alt`

Alt text - required for accessibility when any image source is provided.

`fallback`

Secondary image URL. Used as fallback immediately when both src and srcSet are absent. When a primary source is present, tried automatically after it fails. onError is called once all sources are exhausted.

`onError`

Called once when all sources have failed. Use this to swap in a non-image fallback at the parent level.

`objectFit`

CSS object-fit. Common values: cover · contain · fill · none · scale-down.

`objectPosition`

CSS object-position. Accepts any valid CSS value, e.g. center, top left, 50% 25%.

`borderRadius`

Corner radius - resolves against theme.radii.

Token	Value
`"sq"`	0
`"sm"`	4px
`"md"`	8px
`"lg"`	16px

Styled-system props

Layout

width · height · minWidth · minHeight · maxWidth · maxHeight · display · overflow

Background

backgroundImage · backgroundSize · backgroundPosition · backgroundRepeat · backgroundAttachment

Space - `theme.space`

Prop	Shorthand for
`m` `mt` `mr` `mb` `ml` `mx` `my`	margin + sides
`p` `pt` `pr` `pb` `pl` `px` `py`	padding + sides

Position

position · zIndex · top · right · bottom · left

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.