Layout

Avatar

A framed user image or fallback for accounts, comments and navs.

Component

import { Avatar, AvatarFallback, AvatarImage } from "@swirski/ui";

3 controls

Controls

fallback

size

tone

<Avatar>
  <AvatarFallback>RS</AvatarFallback>
</Avatar>

12 generated

Prop	Type	Default	Notes
`Avatar.asChild`	`boolean`	`false`	Generated from AvatarProps.
`Avatar.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from AvatarProps.
`Avatar.tone`	`'blue' \| 'yellow' \| 'red' \| 'white' \| 'black'`	`"yellow"`	Generated from AvatarProps.
`Avatar.variant`	`'square' \| 'rounded'`	`"square"`	Generated from AvatarProps.
`AvatarImage.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from AvatarImageProps.
`AvatarImage.tone`	`'blue' \| 'yellow' \| 'red' \| 'white' \| 'black'`	`"yellow"`	Generated from AvatarImageProps.
`AvatarImage.variant`	`'default'`	`"default"`	Generated from AvatarImageProps.
`AvatarFallback.asChild`	`boolean`	`false`	Generated from AvatarFallbackProps.
`AvatarFallback.children`	`ReactNode`	`-`	Generated from AvatarFallbackProps.
`AvatarFallback.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from AvatarFallbackProps.
`AvatarFallback.tone`	`'blue' \| 'yellow' \| 'red' \| 'white' \| 'black'`	`"yellow"`	Generated from AvatarFallbackProps.
`AvatarFallback.variant`	`'default'`	`"default"`	Generated from AvatarFallbackProps.
`Avatar`	`HTMLAttributes<HTMLDivElement>`	`-`	Props forwarded to the root avatar.
`AvatarImage`	`ImgHTMLAttributes<HTMLImageElement>`	`-`	Props forwarded to the image.
`AvatarFallback`	`HTMLAttributes<HTMLSpanElement>`	`-`	Props forwarded to the fallback.