Images

Avatar

Storybook

The Avatar component is a reusable component that can be used to render a full rounded image or a placeholder for an image. It provides the option to add children instead of an image for more flexibility. The component is particularly useful in scenarios where a user's profile picture needs to be displayed, or when an image needs to be used to represent an entity or an object.

Imports

1import { Avatar } from 'dd360-ds'

Usage

The src and alt props are used to display an image inside the Avatar component. If these props are not provided, you can use the children prop to display custom content inside the Avatar, such as a text, an icon, or a combination of both. The children prop provides more flexibility than the src and alt props since it allows you to customize the Avatar's content further.

Use the Avatar component as shown below:

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

1import { Avatar } from 'dd360-ds''
2
3<Avatar
4  alt="Avatar"
5  height="50px"
6  src="https://picsum.photos/50/50"
7  width="50px"
8/>
9

Without image

In this example, the Avatar component is used to display a custom text instead of an image. Instead of providing an image through the src prop, the children prop is used to provide the custom content.

The code snippet below shows how to set a Avatar component without image:

1import { Avatar } from 'dd360-ds''
2
3<Avatar
4  style={{
5    backgroundColor: 'red',
6    color: 'white',
7    height: '50px',
8    width: '50px'
9  }}
10>
11  <Text variant="span">TB</Text>
12</Avatar>
13

API Reference

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