Avatar
Import
import { VKAvatar } from "@vivakits/react-components";Variant
The Avatar component comes with 2 different variants that you can change using the variant prop. If no variant is provided, a default icon is shown.
VK
Shape
The Avatar component comes with 3 different shapes that you can change using the shape prop.
Size
The Avatar component comes with 6 different sizes that you can change using the size prop.
Color
The Avatar component comes with 8 different colors that you can change using the color prop.
Font Size
The Avatar component comes with 7 different font sizes that you can change using the fontSize prop.
SY
SY
SY
SY
SY
SY
Border Color
The Avatar component comes with 7 different border color that you can change using the borderColor prop.
API Reference
| Attribute | Type | Description | Default |
|---|---|---|---|
| variant | imagetext | Changes avatar type | text |
| shape | roundedcurvedsquare | Changes avatar shape | rounded |
| color | noneprimarysecondarysuccessdangerwarningdarklight | Changes avatar color | primary |
| borderColor | primarysecondarysuccessdangerwarningdarklight | Changes avatar border color | dark |
| size | xssmmdlgxl2xl | Changes avatar size | lg |
| fontSize | defaultxssmmdlgxl2xl | Changes font size on avatar text | default |
| fontFamily | defaultsansSerifserifmono | Changes font family on avatar text | default |
| fontColor | defaultprimarysecondarysuccessdangerwarningdarklight | Changes font color on avatar text | default |
| withBorder | boolean | Determines if avatar should have border | false |
| textValue | string | Applies shortened version of text using textValue. Ex: "John Doe" will be shown as "JD". only first 2 words are used | - |