Thumbnail With Action

1.2.5

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.

With icon button

With checkbox

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;

Implementação

Instale o componente via terminal.

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

Props

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

ThumbnailWithAction

Name	Type	Description
thumbnail*	object	Thumbnail component properties.
children*	React.ReactNode	Element to be rendered inside the Thumbnail.
contentPosition	'bottom-left' 'bottom-right' 'top-left' 'top-right'	Optional position of the element.