## Feature Examples
### Shape
- description: Control the form of the avatar with a shape prop. It supports 2 shapes:\ - \`circle\` (default) - use it to represent a user.\ - \`square\` - use it to represent an entity such as a company or organization.
- example:
```jsx
;
```
### Content states
- description: Component has 3 states:\ - Loads image when image URL is provided.\ - Falls back to the placeholder when provided image URL is broken or not given.\ - Display initials when image URL is broken or not given, but avatar name is defined.
- example:
```jsx
;
```
### Size
- description: Adjust the avatar size using size prop. It supports 8 sizes:\ - \`size90\`\ - \`size72\`\ - \`size60\`\ - \`size48\` (default)\ - \`size36\`\ - \`size30\`\ - \`size24\`\ - \`size18\`
- example:
```jsx
;
```
### Color
- description: Control avatar color with color prop. It supports 6 colors: - `A1` blue - `A2` arctic blue - `A3` purple - `A4` green - `A5` magenta - `A6` yellow
- example:
```jsx
;
```
### Presence
- description: Use the presence prop to indicate the status of a user. It supports 3 statuses:\ - \`online\` - indicates that user is online.\ - \`offline\` - indicates that user is not available.\ - \`busy\` - indicates that user is online, but is busy, so might not be accessible.
- example:
```jsx
;
```
### Placeholder
- description: Display a placeholder when component has no image and no name. When required, override default placeholders to any custom elements by passing required content to \`placeholder\` prop.
- example:
```jsx
}
/>
;
```
### Indication
- description: Render any indicator via \`customIndication\` prop. It accepts any component or a set of them within a restricted dimensions:\ - 30x30px container for avatar in \`size90\`, \`size72\`.\ - 24x24px container for avatar in \`size60\`, \`size48\`.\ Smaller avatar sizes cannot have custom indicators.
- example:
```jsx
() => {
const CustomIndication = () => (
);
return (
}
/>
}
/>
}
/>
}
/>
);
};
```
### Action button
- description: Render related action such as image upload as an icon button with \`indication\` prop. This prop applies for 4 largest avatar sizes only: size90, size72, size60 and size48.
- example:
```jsx
} />
} />
} />
} />
;
```
### Show action on hover
- description: Reveal action button on avatar hover only with \`showIndicationOnHover\` prop.
- example:
```jsx
}
showIndicationOnHover
/>
}
showIndicationOnHover
/>
}
showIndicationOnHover
/>
}
showIndicationOnHover
/>
;
```
### Loader
- description: Render related action such as image upload as an icon button with \`indication\` prop. This prop applies for 4 largest avatar sizes only: size90, size72, size60 and size48.
- example:
```jsx
}
loading
/>
}
loading
/>
}
loading
/>
}
loading
/>
;
```
## Common Use Case Examples
### Users list
- description: Use `` as a first data column in a table to visually represent your customers.
- example:
```jsx
() => {
const records = [
{
image: ,
name: 'Sara Porter',
country: 'Canada',
orders: 2,
lastActivity: 'Sep 9, 2020',
},
{
image: ,
name: 'Michael Baldwin',
country: 'Germany',
orders: 43,
lastActivity: 'Sep 7, 2020',
},
{
image: ,
name: 'Alex Halifax',
country: 'United Kingdom',
orders: 12,
lastActivity: 'Jun 30, 2020',
},
{
image: ,
name: 'Paul Sheffield',
country: 'US',
orders: 0,
lastActivity: 'Sep 18, 2019',
},
];
const columns = [
{ title: '', width: '36px', render: (row) => row.image },
{ title: 'Name', render: (row) => row.name },
{ title: 'Country', render: (row) => row.country },
{ title: 'Orders', render: (row) => row.orders },
{ title: 'Last Activity', render: (row) => row.lastActivity },
{
title: '',
render: () => (
{},
}}
/>
),
},
];
return (
Customers
);
};
```
### Prefix
- description: Use `` as a prefix item to build user selections.
- example:
```jsx
option.value({ selected: option.id }).props.title}
fixedFooter={}
options={[
listItemSelectBuilder({
id: 0,
prefix: ,
title: 'Carmel Lloyd',
}),
listItemSelectBuilder({
id: 1,
prefix: ,
title: 'Gracie-May Marsden',
}),
listItemSelectBuilder({
id: 2,
prefix: ,
title: 'Keisha Decker',
}),
listItemSelectBuilder({
id: 3,
prefix: ,
title: 'Ruairidh Fitzgerald',
}),
listItemSelectBuilder({
id: 4,
prefix: ,
title: 'Sheldon Chavez',
}),
]}
/>;
```
### Upload photo
- description: Use an \`indication\` prop to display a button allowing users to manually upload a photo to avatar
- example:
```jsx
{}}>
{({ openFileUploadDialog }) => (
}
/>
)}
Anne Rikki
Edit Contact
Email
anne.rikki@email.com
Phone
+44 734 349973
Billing Address
2549 Perine Street, Vermont;
```