@wix/design-system
Version:
@wix/design-system
60 lines (33 loc) • 1.32 kB
Markdown
## Feature Examples
### Size
- description: Controls size of a component. It supports 2 sizes:
- `medium` (default)- use in all common cases
- `small` - use to de-emphasise the group, also in more dense and narrow layouts
- example:
```jsx
```
### Group type
- description: Changes density of a group. Component supports 2 types:
- `stretched` (default)- use when each user is as important as a group as a whole
- `condensed` - use in narrow layouts and in cases where it is important to show the sum of the people rather than individuals
- example:
```jsx
```
### Divider
- description: Separates first avatar from the rest of the group to highlight the difference of a status or role (i.e. admin, team lead, etc).
Component allows to separate single avatar only, which must be a first item on the list.
- example:
```jsx
```
### Max number of items
- description: Defines the maximum number of items to show before collapsing them.
By default component displays up to 5 items. The ‘N+’ indication will replace the last avatar, in case the number exceeds this limit.
- example:
```jsx
```
## Common Use Case Examples
### Assigned users
- description: Use avatar group to display multiple users that are assigned to the same role, group or task.
- example:
```jsx
```