AvatarList

Displays a list of profile images.

Props

avatars

Array<{ "initials": "string", "thumbnail": "string" }>

[]

className

String

maxVisible

Number

size

'xsmall' │ 'small' │ 'medium' │ 'large'

'large'

Examples

The allowed sizes are `small`, `medium`, and `large`

+17

+16

+15

+13

<div className="docs-vertical-group">
  <AvatarList avatars={sampleData} maxVisible={4} size="xsmall" />
  <AvatarList avatars={sampleData} maxVisible={5} size="small" />
  <AvatarList avatars={sampleData} maxVisible={6} size="medium" />
  <AvatarList avatars={sampleData} maxVisible={8} size="large" />
</div><div className="docs-vertical-group">
  <AvatarList avatars={sampleData} maxVisible={4} size="xsmall" />
  <AvatarList avatars={sampleData} maxVisible={5} size="small" />
  <AvatarList avatars={sampleData} maxVisible={6} size="medium" />
  <AvatarList avatars={sampleData} maxVisible={8} size="large" />
</div>

The `maxVisible` property defines how many avatars are shown before collapsing.

+18

+16

+13

<div className="docs-vertical-group">
  <AvatarList avatars={sampleData} maxVisible={3} size="large" />
  <AvatarList avatars={sampleData} maxVisible={5} size="large" />
  <AvatarList avatars={sampleData} maxVisible={8} size="large" />
</div><div className="docs-vertical-group">
  <AvatarList avatars={sampleData} maxVisible={3} size="large" />
  <AvatarList avatars={sampleData} maxVisible={5} size="large" />
  <AvatarList avatars={sampleData} maxVisible={8} size="large" />
</div>

AvatarList

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Examples

The allowed sizes are .css-ueqitl{font-family:Inconsolata;}small, medium, and large

The maxVisible property defines how many avatars are shown before collapsing.

Props

The allowed sizes are `small`, `medium`, and `large`

The `maxVisible` property defines how many avatars are shown before collapsing.