@rmwc/avatar NPM

Avatars `RMWC ADDON`

Avatars are virtual representations of users in a system.

Module @rmwc/avatar
Import styles:
- Using CSS Loader
  - import '@rmwc/avatar/styles';
- Or include stylesheets
  - '@rmwc/avatar/avatar.css'
  - '@rmwc/icon/icon.css'
  - '@material/ripple/dist/mdc.ripple.css'

<>
  <Avatar
    src="images/avatars/blackwidow.png"
    size="xsmall"
    name="Natalia Alianovna Romanova"
  />
  <Avatar
    src="images/avatars/hulk.png"
    size="small"
    name="Bruce Banner"
  />
  <Avatar
    src="images/avatars/thor.png"
    size="medium"
    name="Thor Odinson"
  />
  <Avatar
    src="images/avatars/captainamerica.png"
    size="large"
    name="Steve Rogers"
  />
  <Avatar
    src="images/avatars/ironman.png"
    size="xlarge"
    name="Tony Stark"
  />
</>

<>
  <Avatar name="Natalia Alianovna Romanova" size="xsmall" />
  <Avatar name="Bruce Banner" size="small" />
  <Avatar name="Thor Odinson" size="medium" />
  <Avatar name="Steve Rogers" size="large" />
  <Avatar name="Tony Stark" size="xlarge" />
</>

<Avatar
  src="images/avatars/blackwidow.png"
  size="large"
  name="Natalia Alianovna Romanova"
  square
/>

<Avatar
  src="images/avatars/google.svg"
  size="large"
  contain
  name="Google"
  square
/>

Avatar Groups

This is for Avatars that are displayed in a corellated grouping or list.

<AvatarGroup>
  <Avatar
    src="images/avatars/captainamerica.png"
    name="Steve Rogers"
    size="large"
    interactive
  />
  <Avatar
    src="images/avatars/ironman.png"
    name="Tony Stark"
    size="large"
    interactive
  />
  <AvatarCount size="large" value={12} interactive />
</AvatarGroup>

<AvatarGroup dense>
  <Avatar
    src="images/avatars/captainamerica.png"
    name="Steve Rogers"
    size="large"
    interactive
  />
  <Avatar
    src="images/avatars/ironman.png"
    name="Tony Stark"
    size="large"
    interactive
  />
  <AvatarCount size="large" overflow value={4} interactive />
</AvatarGroup>

Usage with other components

The avatar component has been designed to work nicely in any of the places you would use an icon.

<Button
  label="Enlist now!"
  icon={
    <Avatar
      src="images/avatars/captainamerica.png"
      name="Steve Rogers"
    />
  }
/>

<Chip
  label="Hulk Smash"
  icon={<Avatar src="images/avatars/hulk.png" name="Bruce Banner" />}
/>

<TextField
  label="Message Natalia..."
  outlined
  icon={
    <Avatar
      src="images/avatars/blackwidow.png"
      name="Natalia Alianovna Romanova"
      square
    />
  }
/>

Avatar

An Avatar component for displaying users in a system.

Props

Name	Type	Description
`contain`	`boolean`	Contain the avatar image instead of covering.
`interactive`	`boolean`	Make the avatar interactive.
`name`	`string`	The name of the user. This will get converted to initials and set the hover title.
`ripple`	`RipplePropT`	Adds a ripple effect to the component
`size`	`IconSizeT`	The size of the avatar
`square`	`boolean`	Make the avatar square.
`src`	`string`	The url for the image. This gets passed to the Icon component.

AvatarGroup

A container for groups of Avatars

Props

Name	Type	Description
`dense`	`boolean`	Makes the list dense

AvatarCount

An Avatar count for displaying list overflow.

Props

Name	Type	Description
`interactive`	`boolean`	Make the avatar interactive.
`overflow`	`boolean`	Optionally renders a "+" to indicate overlow.
`size`	`IconSizeT`	The size of the avatar
`square`	`boolean`	Make the avatar square.
`value`	`number`	The number of users.