Avatar
Representation of entity
import { Avatar } from '@kalidao/reality'
name | type | default |
|---|---|---|
address | string | - |
as | "img" | ComponentType<{}> | img |
label* Required | string | - |
noBorder | boolean | - |
placeholder | boolean | - |
shape | "circle" | "square" | circle |
size | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ... | 12 |
src | string | - |
A placeholder can be shown by setting the placeholder prop to true. The color is determined by the (optional) address prompt. It will default to blue. The placeholder will also be shown if the src is invalid and can not be loaded.
By default, there is a light border around the edge to define image edges on similarly colored backgrounds. This can be disabled by using the noBorder prop.
If you are using Next.js and configured next/image appropriately, you can pass it in with the as prop.