Thumbnail With Action

The Thumbnail With Action pattern allows you to add interactive elements to image thumbnails. By overlaying custom content onto a thumbnail component in one of the four corners, you can embed atomic components such as buttons, icons, or links that enable users to perform specific actions related to the image.

import React from "react";
import { ThumbnailWithAction } from "@nimbus-ds/patterns";
import { IconButton } from "@nimbus-ds/components";
import { TrashIcon } from "@nimbus-ds/icons";

const Example: React.FC = () => (
  <ThumbnailWithAction
    thumbnail={{
      aspectRatio: "1/1",
      width: "120px",
      alt: "Alt text",
      src: "https://images.unsplash.com/photo-1556228578-0d85b1a4d571?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3387&q=80",
    }}
  >
    <IconButton source={<TrashIcon />} size="2rem" />
  </ThumbnailWithAction>
);

export default Example;

Instalá el componente via terminal.

npm install @nimbus-ds/thumbnail-with-action

Additional props are passed to the <ThumbnailWithAction> element. See div docs for a list of props accepted by the <ThumbnailWithAction> element.