Usage

1import { Image } from "@raystack/apsara";

Image Props

Examples

Object Fit

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

1<Flex gap="large" align="center">
2  <Image
3    src="https://images.unsplash.com/photo-1447690709975-318628b14c57"
4    alt="Nature landscape"
5    width={200}
6    height={150}
7    fit="contain"
8  />
9  <Image
10    src="https://images.unsplash.com/photo-1447690709975-318628b14c57"
11    alt="Nature landscape"
12    width={200}
13    height={150}
14    fit="cover"
15  />
16  <Image
17    src="https://images.unsplash.com/photo-1447690709975-318628b14c57"
18    alt="Nature landscape"
19    width={200}
20    height={150}
21    fit="fill"
22  />
23</Flex>

Border Radius

Choose from different border radius styles to match your design.

1<Flex gap="large">
2  <Image
3    src="https://images.unsplash.com/photo-1447690709975-318628b14c57"
4    alt="Nature"
5    width={100}
6    height={100}
7    radius="none"
8  />
9  <Image
10    src="https://images.unsplash.com/photo-1447690709975-318628b14c57"
11    alt="Nature"
12    width={100}
13    height={100}
14    radius="small"
15  />
16  <Image
17    src="https://images.unsplash.com/photo-1447690709975-318628b14c57"
18    alt="Nature"
19    width={100}
20    height={100}
21    radius="medium"
22  />
23  <Image
24    src="https://images.unsplash.com/photo-1447690709975-318628b14c57"
25    alt="Nature"
26    width={100}

Fallback

Handle image loading failures gracefully with fallback images.

1<Flex gap="large">
2  <Image
3    src="invalid-image-url.jpg"
4    fallback="https://images.unsplash.com/photo-1447690709975-318628b14c57"
5    alt="With fallback"
6    width={200}
7    height={150}
8    fit="cover"
9    radius="medium"
10  />
11</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