Avatar

A circular user image with a text fallback.

AvatarProps packages/core/src/extra-controls.ts:75 ↗

Import

import { Avatar } from "@tarve/core";

Usage

Avatar.tsx

import { Avatar, Row } from "@tarve/core";

<Row gap={8}>
  <Avatar src="assets/ada.png" fallback="AL" size={48} />
  <Avatar fallback="GH" size={48} />
</Row>

Props

Prop	Type	Default
`fallback`	`string`	`"?"`
`fit`	`"cover" \| "contain"`	`"cover"`
`size`	`number`	`40`
`src`	`string`	—

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle