Image

<Image
  src="https://images.unsplash.com/photo-1447690709975-318628b14c57"
  alt="Placeholder Image"
  width="200px"
  height="200px"
/>

Usage

import { Image } from "@raystack/apsara/v1";
 
<Image
  src="/path/to/image.jpg"
  alt="Description"
  width={300}
  height={200}
  fit="cover"
/>;

Image Props

Prop	Type	Default
`src`	`string`	-
`alt`	`string`	-
`fit`	`"contain" \| "cover" \| "fill"`	`cover`
`radius`	`"none" \| "small" \| "medium" \| "full"`	-
`fallback`	`string`	-
`width`	`string \| number`	-
`height`	`string \| number`	-
`className`	`string`	-

Examples

Object Fit

Control how the image fills its container with different object-fit modes.

<Flex gap="large" align="center">
  <Image
    src="https://images.unsplash.com/photo-1447690709975-318628b14c57"
    alt="Nature landscape"
    width={200}
    height={150}
    fit="contain"
  />
  <Image
    src="https://images.unsplash.com/photo-1447690709975-318628b14c57"
    alt="Nature landscape"
    width={200}
    height={150}
    fit="cover"
  />
  <Image
    src="https://images.unsplash.com/photo-1447690709975-318628b14c57"
    alt="Nature landscape"
    width={200}
    height={150}
    fit="fill"
  />
</Flex>

Border Radius

Choose from different border radius styles to match your design.

<Flex gap="large">
  <Image
    src="https://images.unsplash.com/photo-1447690709975-318628b14c57"
    alt="Nature"
    width={100}
    height={100}
    radius="none"
  />
  <Image
    src="https://images.unsplash.com/photo-1447690709975-318628b14c57"
    alt="Nature"
    width={100}
    height={100}
    radius="small"
  />
  <Image
    src="https://images.unsplash.com/photo-1447690709975-318628b14c57"
    alt="Nature"
    width={100}
    height={100}
    radius="medium"
  />
  <Image
    src="https://images.unsplash.com/photo-1447690709975-318628b14c57"
    alt="Nature"
    width={100}
    height={100}
    radius="full"
  />
</Flex>

Fallback

Handle image loading failures gracefully with fallback images.

<Flex gap="large">
  <Image
    src="invalid-image-url.jpg"
    fallback="https://images.unsplash.com/photo-1447690709975-318628b14c57"
    alt="With fallback"
    width={200}
    height={150}
    fit="cover"
    radius="medium"
  />
</Flex>

Styling

The IconButton uses CSS variables for consistent styling across themes:

Background color uses --rs-color-background-base-primary
Border color uses --rs-color-border-base-primary
Text color uses --rs-color-foreground-base-primary
Hover state uses --rs-color-background-base-primary-hover
Disabled state uses reduced opacity and different background/border colors

Accessibility

The IconButton component inherits all the accessibility features of the native HTML button element:

Keyboard navigation support
Proper disabled state handling
Can be focused and activated using keyboard
Supports all standard button ARIA attributes

For better accessibility, make sure to:

Provide meaningful aria-label when the button's purpose isn't clear from the icon alone
Consider adding tooltips for icon-only buttons

Accessibility

The Image component follows accessibility best practices:

ARIA Attributes

role="img": Explicitly defines the image role for assistive technologies
aria-label: Provides description matching alt text for screen readers
alt: Required alternative text description for screen readers

Performance

loading="lazy": Default lazy loading for better performance
decoding="async": Asynchronous image decoding to prevent blocking
Fallback support for failed image loads

Image

On this page