Image

Usage

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

Image Props

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