Images

ImageIcon

Storybook

The ImageIcon component allows you display an image icon. It can be used as a standalone image or as a button with an onClick function.

Imports

1import { ImageIcon } from 'dd360-ds'

Usage

To use the ImageIcon component, you can import it into your app and render it with the desired props. Here's an example:

The code snippet below shows how to use the ImageIcon component:

1import { ImageIcon } from 'dd360-ds''
2
3<ImageIcon src="https://picsum.photos/200/300?grayscale" />
4

ImageIcon as a button

You can use the prop button to render the ImageIcon as a button. A boolean indicating whether the ImageIcon should be rendered as a button or not. When button is true, the ImageIcon is wrapped in a button element.

The buttonOnClick property receives the function to be called when the button is clicked. This prop is only used when button is true.

The code snippet below shows how to set a ImageIcon component as a button and how to call the function when the button is clicked:

1import { ImageIcon } from 'dd360-ds''
2
3<ImageIcon
4  button
5  buttonOnClick={() => {}}
6  src="https://picsum.photos/200/300?grayscale"
7/>
8

API Reference

Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.