Quaff

QAvatar

Avatars represent people or other entities using images, icons, or initials. Choose a shape and size that suit the surrounding content.

TIDEPOOL FIELD STATION

A small crew. A big blue world.

info QAvatar API Source
interface QAvatarProps extends HTMLAttributes<HTMLElement>
alt
?: string = ""
Image alternative text. Defaults to an empty string for decorative images. Provide a description when the image conveys information not already present in nearby text.
paused
?: boolean = $bindable(false)
Pauses a video avatar. Bind this property to provide a play/pause control. Set it to true to prevent autoplay. Defaults to false; has no effect on images.
shape
?: QAvatarShapeOptions = "circle"
Shape of the avatar. The default circle follows Material 3; other shapes are Quaff extensions.
size
?: QSize | CssValue | number = "sm"
Size of the component to choose between multiple predefined sizes. Also supports CSS size values (e.g. "40px", "1rem"). If a number is provided, it will be converted to a px value.
sources
?: QAvatarVideoSrcOptions[] = undefined
Only for video avatars. Use this prop to specify multiple sources for the video. The browser will play the first source it can support. This overrides the "src" prop. If used while the "video" prop is set to false, this prop has no effect.
src
?: string = undefined
Source of the image to be used as the avatar. Can be a url or a path to a local file. If the "video" prop is set to true, this will be used as an MP4 video source. If you want to use a different video format, use the "sources" prop.
video
?: boolean = false
If set to true, the avatar will be treated as a video avatar. This means that the "src" prop will be used as an MP4 video source and the "sources" prop can be used to specify multiple sources for the video.

Usage

Interactive Profiles
Avatars identify people at a glance. Wrap them in labelled buttons when they select a profile or perform an action. Choose a crew member to update the selected identity.
TIDEPOOL FIELD STATION

Choose a crew member

Selected: Alex Taylor · Marine ecologist

Images, Initials and Icons
Use src for an image, or put initials and icons in the default snippet. Initials use title-medium typography and primary container colors; theme classes let each identity stand out.

RV Tern

Our floating field lab

Sam Reed

Equipment & observations

Water lab

Samples from the morning tide

Size and Shape
Named sizes range from xs (32px) to xl (64px); the default is sm (40px). Custom sizes accept CSS lengths or numbers in pixels. Images and icons keep their dimensions while named-size initials can grow with text. A circle is the Material 3 default; the other shapes are Quaff extensions.
Use vessel illustration
VESSEL DIRECTORY

RV Tern

Survey boat · Berth 04

Back before high tide
Video Avatars
Set video with an MP4 src, or provide typed sources for other formats. Videos are muted and loop. They autoplay by default; start with paused and bind it to a playback control when motion is optional.
BACK AT THE STATION

A round for the shore team

Citrus on ice, from the galley. Recorded clip · no audio.

Accessible Identities
Images default to alt="" when nearby text already names them. Give an informative image meaningful alt text. For standalone initials, icons or video, use role="img" and an accessible name. Wrap interactive avatars in a labelled button or link, as in the crew picker above.
Illustration of a yellow research boat at sea
An image with its own description
Initials with an accessible name

The videoAccessibility snippet accepts caption tracks and fallback content. Fallback text alone does not provide captions or playback controls.

Privacy Policy