Avatar

Variants

<DemoSpaceX>
  <VelvetAvatar @variant="emerald" @name="Jake Peralta" />
  <VelvetAvatar @variant="amber" @name="Jake Peralta" />
  <VelvetAvatar @variant="rose" @name="Jake Peralta" />
</DemoSpaceX>

Sizes

<DemoSpaceX>
  <VelvetAvatar @name="Jake Peralta" @size="sm" />
  <VelvetAvatar @name="Jake Peralta" @size="md" />
  <VelvetAvatar @name="Jake Peralta" @size="lg" />
</DemoSpaceX>

Round

<VelvetAvatar @isRound={{true}} @name="Jake Peralta" />

Images

<VelvetAvatar @src="https://avatars.githubusercontent.com/u/7403183" />

Initials

<VelvetAvatar @initials="JP" />

No User Data

<VelvetAvatar />

Signature

Element

HTMLDivElement

Blocks

This component does not accept any blocks.

Arguments

Name	Description	Type	Default Value
`@initials`	The initials of the user.	`string`	`""`
`@isRound`	Indicate if the avatar is round.	`boolean`	`false`
`@name`	The name of the user.	`string`	`""`
`@size`	The size of the avatar.	`'sm' \| 'md' \| 'lg'`	`"md"`
`@src`	The source of the image.	`string`	`""`
`@variant`	The appearance of the avatar.	`string \| 'primary'`	`"primary"`

Arguments marked with * are required.

The order to determine what to render is as follows:

If the @src argument is provided, the image will be rendered
If the @src argument is not provided, the @name argument will be used to determine the initials
If the @name argument is not provided, the @initials argument will be rendered
If the @initials argument is not provided, a user icon will be rendered as a last resort