Component reference

Avatar

A face or the initials that remain when the image is missing.

Preview

Image and initials

A person's picture, or the initials that remain when the image is missing. ChatMessage still takes any avatar child in its identity column rather than requiring this control.

packages/meowtail/stories/avatar.stories.tsxline 21tsx

render: () => (
  <Specimens>
    <Specimen label="Image and initials" note="Initials remain when no picture is given.">
      <Inline gap="compact" align="center">
        <Avatar name="Ada Lovelace" src={portrait} />
        <Avatar name="Ada Lovelace" />
        <Avatar name="Grace Hopper" />
      </Inline>
    </Specimen>
    <Specimen label="Sizes" note="Small, default and large.">
      <Inline gap="compact" align="center">
        <Avatar name="Ada Lovelace" size="small" />
        <Avatar name="Ada Lovelace" />
        <Avatar name="Ada Lovelace" size="large" />
      </Inline>
    </Specimen>
  </Specimens>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { Avatar } from "meowtail";

<Avatar name="Ada Lovelace" />

API reference

Props

Prop	Type	Default
`size`	`"small" \| "default" \| "large"`	`"default"`
`name`RequiredUsed for initials and the accessible name.	`string`	–
`src`	`string`	–
`alt`	`string`	–

Also takes className, children and the attributes and events of its root element.

DOM parts

rootimageinitials

Registry

The component is registered as avatar in the meowtail component registry.