# ImageGroup

Display up to 4 images in a grid or stacked layout. For example, images of products in a wishlist or subscription. When there are more than 4 images, the component indicates how many more images are not displayed.

```tsx
import {
  Image,
  ImageGroup,
  View,
  reactExtension,
} from '@shopify/ui-extensions-react/customer-account';
import React from 'react';

export default reactExtension('customer-account.page.render', () => <App />);

function App() {
  return (
    <View maxInlineSize={300}>
      <ImageGroup>
        <Image source="../assets/flower.jpg" />
        <Image source="../assets/flower.jpg" />
        <Image source="../assets/flower.jpg" />
      </ImageGroup>
    </View>
  );
}

```

```js
import {
  Image,
  ImageGroup,
  View,
  extension,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.page.render',
  (root, api) => {
    renderApp(root, api);
  },
)

function renderApp(root, api) {
  const firstImage = root.createComponent(Image, {
    source: "../assets/flower.jpg"
  });

  const secondeImage = root.createComponent(Image, {
    source: "../assets/flower.jpg"
  });

  const thirdImage = root.createComponent(Image, {
    source: "../assets/flower.jpg"
  });

  const imageGroup = root.createComponent(ImageGroup);

  imageGroup.append(firstImage);
  imageGroup.append(secondeImage);
  imageGroup.append(thirdImage);

  const view = root.createComponent(View, {maxInlineSize: 300});
  view.append(imageGroup);

  root.append(view);
}

```

## ImageGroupProps

### ImageGroupProps

### accessibilityLabel

value: `string`

A label that describes the purpose or contents of the image group. When set, it will be announced to users using assistive technologies and will provide them with more context.

### loading

value: `boolean`

Indicates that the image group is in a loading state.

When `true`, the image group show a loading indicator.

### totalItems

value: `number`

Indicates the total number of items that could be displayed in the image group. It is used to determine the remaining number to show when all the available image slots have been filled.

### variant

value: `'grid' | 'inline-stack'`

Changes the layout of the images.