# @fw-components/fw-avatar
> Avatar Web Component
Latest version **2.4.0** (published 2026-06-04) · ISC license · 0 weekly downloads
## Install
```sh
npm install @fw-components/fw-avatar
pnpm add @fw-components/fw-avatar
yarn add @fw-components/fw-avatar
bun add @fw-components/fw-avatar
```
## Health
**Score 60/100 (C)** — status: active.
Positive: esm support; no vulnerabilities; has provenance; high maintenance score.
Warnings: low downloads; no types.
## Facts
| | |
|---|---|
| Version | 2.4.0 |
| Published | 2026-06-04 |
| First published | 2023-07-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 61.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 1 |
| Author | The Fundwave Authors |
| Maintainers | rickygarg, ishasharma |
## Links
- npm: https://www.npmjs.com/package/@fw-components/fw-avatar
- Repository: https://github.com/fundwave/fw-components
- Homepage: https://github.com/fundwave/fw-components#readme
- Issues: https://github.com/fundwave/fw-components/issues
- npm.io page: https://npm.io/package/@fw-components/fw-avatar
## Dependencies (9)
- [lit](https://npm.io/package/lit.md) 3.3.3
- [@material/mwc-icon](https://npm.io/package/@material/mwc-icon.md) 0.27.0
- [@material/mwc-list](https://npm.io/package/@material/mwc-list.md) 0.27.0
- [@material/mwc-menu](https://npm.io/package/@material/mwc-menu.md) 0.27.0
- [@polymer/iron-icons](https://npm.io/package/@polymer/iron-icons.md) 3.0.1
- [@polymer/paper-input](https://npm.io/package/@polymer/paper-input.md) 3.2.1
- [@fw-components/styles](https://npm.io/package/@fw-components/styles.md) ^2.4.0
- [@polymer/paper-button](https://npm.io/package/@polymer/paper-button.md) 3.0.1
- [@polymer/paper-icon-button](https://npm.io/package/@polymer/paper-icon-button.md) 3.0.2
## Recent versions
- 2.4.0 (latest) — 2026-06-04
- 2.3.5-linting.0 (linting) — 2026-06-04
- 2.3.4-notion-update.1 (notion-update) — 2026-06-03
- 2.3.3-optionally-chain-props.0 (optionally-chain-props) — 2025-10-07
- 2.3.3-notion-tables.0 (notion-tables) — 2025-10-07
- 2.3.2-formula-editor-regex-fix.0 (formula-editor-regex-fix) — 2025-04-03
- 2.2.1-formula-error-typo-fixes.0 (formula-error-typo-fixes) — 2025-03-25
- 2.2.1-fw-localize.0 (fw-localize) — 2025-03-17
- 2.1.1-showcase-gallery.0 (showcase-gallery) — 2025-03-12
- 2.0.7-formula-editor.44 (formula-editor) — 2025-03-11
- 2.0.7-dnd-grid-layout.0 (dnd-grid-layout) — 2025-03-06
- 2.0.6-theme-builder.0 (theme-builder) — 2024-11-05
- 2.0.5-ignore-blocks-wo-role.1 (ignore-blocks-wo-role) — 2024-10-21
- 2.0.4-fix-match-path-pattern.0 (fix-match-path-pattern) — 2024-05-17
- 2.0.3-track-multiple-targets.0 (track-multiple-targets) — 2024-02-14
- … 26 more at https://npm.io/package/@fw-components/fw-avatar/versions
## README
# fw-avatar-group
FW Avatar Group component is used to show a list of items as avatars. It also displays a detailed list on clicking any avatar.
## Installation
```
npm i @fw-components/fw-avatar
```
## Example usage
```html
let users = [{name: "Richard", company: "PiedPiper"},{name: "Dinesh", company: "PiedPiper"},{name: "Jared", company: "PiedPiper"}]
```
## API
### Properties/Attributes
| Name | Type | Default | Description |
| -------------------- | ------- | ---------------------------------- | ------------------------------------------------------------------- |
| items | Array | [] | data as Array of objects |
| nameAttribute | String | "userName" | key in item used to display initials on avatar and title on list |
| secondaryAttribute | String | null | key in item used to display secondary line for the item in the list |
| maxCount | Number | 5 | max count of avatars to be displayed in the group |
| header | String | "Members" | header of the list |
| avatarBackground | String | custom hsl for item[nameAttribute] | background for the avatar |
| primaryAction\* | Object | null | action to be displayed on top of list |
| showSearchBar | Boolean | false | show search bar for the items |
| emptyStateMessage | String | null | message to be displayed when state is empty while searching |
| emptyStateAction\*\* | Object | null | action to be displayed when state is empty while searching |
| secondaryAction\*\* | Object | null | action to be displayed at bottom of list |
| absolute | Boolean | false | if true, list is positioned absolute on devices with width < 767px |
\*primaryAction => {title : 'Title for the action button', icon : 'mwc-icon to show next to button, default to add_circle'}
\*\*empty state/secondary action => {title : 'Title for the action button', closeDialog : 'boolean to close the dialog on click'}
### Methods
_None_
### Events
| Event Name | Detail | Description |
| -------------------------- | ------------------------------ | ------------------------------------------------------------------------------------ |
| item-clicked | { item } | Fired when an item is clicked from the list, includes the item as detail |
| primary-action-clicked | null | Fired when primary action is clicked |
| secondary-action-clicked | null | Fired when secondary action is clicked |
| empty-state-action-clicked | { value : "search bar value" } | Fired when empty state action is clicked, includes value in the search bar as detail |
### CSS Custom Properties
fw-avatar-group uses fw-avatar internally
#### Global Custom Properties
| Name | Description |
| ----------- | ---------------------------- |
| dark-color | color of text on avatar |
| light-color | border of overlapping avatar |
# fw-avatar
FW Avatar component is used to show an avatar
## Installation
```
npm i @fw-components/fw-avatar
```
## Example usage
```html
```
## API
### Properties/Attributes
| Name | Type | Default | Description |
| ------ | ------ | ----------------------------- | ----------------------------------------- |
| name | String | null | name used for initials |
| title | String | name | title visible on hover, defaults to name |
| type | String | none | type of avatar initials/image |
| color | String | custom hsl for name or 'plum' | color of avatar |
| imgSrc | String | null | src of image when type of avatar is image |
### Methods
_None_
### Events
_None_
### CSS Custom Properties
| Name | Default | Description |
| ------------ | ------- | -------------------- |
| avatar-color | white | text color on avatar |
| avatar-size | 30px | size of avatar |
| border | none | border of avatar |
#### Global Custom Properties
| Name | Description |
| ----------- | ------------------------------ |
| font-family | font-family for text on avatar |
---
_Source: https://npm.io/package/@fw-components/fw-avatar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._