# @rmwc/avatar

> RMWC avatar component

Latest version **14.3.5** (published 2024-10-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rmwc/avatar
pnpm add @rmwc/avatar
yarn add @rmwc/avatar
bun add @rmwc/avatar
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 14.3.5 |
| Published | 2024-10-24 |
| First published | 2019-02-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 13.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1657 |
| Author | rmwc |
| Maintainers | jamesmfriedman |
| Keywords | rmwc |

## Links

- npm: https://www.npmjs.com/package/@rmwc/avatar
- Repository: https://github.com/rmwc/rmwc
- Homepage: https://github.com/rmwc/rmwc/tree/master/packages/avatar
- Issues: https://github.com/rmwc/rmwc/issues
- npm.io page: https://npm.io/package/@rmwc/avatar

## Dependencies (4)

- [@rmwc/base](https://npm.io/package/@rmwc/base.md) 14.3.5
- [@rmwc/icon](https://npm.io/package/@rmwc/icon.md) 14.3.5
- [@rmwc/types](https://npm.io/package/@rmwc/types.md) 14.3.5
- [@rmwc/ripple](https://npm.io/package/@rmwc/ripple.md) 14.3.5

## Recent versions

- 14.3.5 (latest) — 2024-10-24
- 14.0.2-alpha.7 (next) — 2023-10-30
- 14.3.4 — 2024-09-25
- 14.3.3 — 2024-08-30
- 14.3.2 — 2024-08-19
- 14.3.1 — 2024-07-19
- 14.3.0 — 2024-07-18
- 14.2.9 — 2024-07-03
- 14.2.8 — 2024-07-01
- 14.2.7 — 2024-06-30
- 14.2.6 — 2024-06-28
- 14.2.5 — 2024-06-26
- 14.2.2 — 2024-04-24
- 14.2.1 — 2024-04-17
- 14.2.0 — 2024-04-17
- … 109 more at https://npm.io/package/@rmwc/avatar/versions

## README

# 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'**


```jsx
<>
  <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"
  />
</>
```

```jsx
<>
  <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" />
</>
```

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

```jsx
<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.

```jsx
<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>
```

```jsx
<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.

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

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

```jsx
<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. |

---
_Source: https://npm.io/package/@rmwc/avatar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._