Documentation
Avatar
The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.
import { Avatar } from '@nextui-org/react';
Default
You can display an avatar with just text or image
Sizes
The Avatar comes in 5 sizes and you can also set a custom size in px with size property.
Colors
You can change the color with color prop
Bordered
You can change the full style to a bordered Avatar with the bordered property.
Zoomed
You can apply a zoom animation to avatar with the zoomed property.
Squared
You can change the full style to a squared Avatar with the squared property.
Icon
NextUI doesn't use any library or icon font by default, with this we give the freedom to use the one you prefer. In the following example we use Boxicons
Group
You can group several avatars with the parent component Avatar.Group
APIs
Avatar Props
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| color | NormalColors string | NormalColors | Change avatar color | default |
| textColor | SimpleColors string | SimpleColors | Change avatar text color | default |
| src | string | - | Image source (local or remote) | - |
| text | string | - | Display text when image is missing | - |
| alt | string | - | Display alt text when image is missing | - |
| size | NormalSizes number | NormalSizes | Avatar size | medium |
| bordered | boolean | true/false | Bordered avatar | false |
| borderWeight | NormalWeights | NormalWeights | Border weight for bordered avatar | normal |
| pointer | boolean | true/false | Display pointer cursor on hover | false |
| stacked | boolean | true/false | Stacked display group | false |
| zoomed | boolean | true/false | Zoomed avatar | false |
| squared | boolean | true/false | Squared avatar | false |
| icon | ReactNode | - | Show icon in avatar | - |
| css | Stitches.CSS | - | Override Default CSS style | - |
| as | keyof JSX.IntrinsicElements | - | Changes which tag component outputs | span |
| ... | ImgHTMLAttributes | 'alt', 'crossOrigin', 'className', ... | Native props | - |
Avatar Group Props
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| count | number | - | Total count of avatars | - |
| animated | boolean | - | Display translations animation on hover | true |
| css | Stitches.CSS | - | Override Default CSS style | - |
| as | keyof JSX.IntrinsicElements | - | Changes which tag component outputs | div |
| ... | HTMLAttributes | 'id', 'name', 'className', ... | Native props | - |
Avatar types
Normal Colors
type NormalColors = | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'gradient';
Simple Colors
type SimpleColors = | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
Normal Sizes
type NormalSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
Normal Weights
type NormalWeights = 'light' | 'normal' | 'bold' | 'extrabold' | 'black';
