'use client'
import { Avatar } from '@saas-ui/react'
export const AvatarBasic = () => {
return <Avatar name="David Wilson" src="/avatars/1.png" />
}
Anatomy
import { Avatar, AvatarGroup } from '@saas-ui/react/avatar'<AvatarGroup>
<Avatar />
</AvatarGroup>Examples
Sizes
Use the size prop to change the size of the avatar
import { HStack } from '@chakra-ui/react'
import { Avatar } from '@saas-ui/react'
export const AvatarWithSizes = () => {
return (
<HStack gap="3">
<Avatar size="xs" name="David Wilson" src="/avatars/1.png" />
<Avatar size="sm" name="David Wilson" src="/avatars/1.png" />
<Avatar size="md" name="David Wilson" src="/avatars/1.png" />
<Avatar size="lg" name="David Wilson" src="/avatars/1.png" />
<Avatar size="xl" name="David Wilson" src="/avatars/1.png" />
<Avatar size="2xl" name="David Wilson" src="/avatars/1.png" />
</HStack>
)
}
Shape
Use the shape prop to change the shape of the avatar, from rounded to
square
import { HStack } from '@chakra-ui/react'
import { Avatar } from '@saas-ui/react'
export const AvatarWithShape = () => {
return (
<HStack gap="4">
<Avatar
name="David Wilson"
src="/avatars/1.png"
shape="square"
size="lg"
/>
<Avatar
name="Marcus Chen"
src="/avatars/2.png"
shape="rounded"
size="lg"
/>
<Avatar
name="Sarah Johnson"
src="/avatars/3.png"
shape="full"
size="lg"
/>
</HStack>
)
}
Fallback
The initials of the name can be used as a fallback when the src prop is not
provided or when the image fails to load.
'use client'
import { HStack } from '@chakra-ui/react'
import { Avatar } from '@saas-ui/react'
export const AvatarWithFallback = () => {
return (
<HStack>
<Avatar name="Oshigaki Kisame" src="https://bit.ly/broken-link" />
<Avatar
name="Sasuke Uchiha"
src="https://bit.ly/broken-link"
colorPalette="teal"
/>
<Avatar src="https://bit.ly/broken-link" colorPalette="red" />
</HStack>
)
}
Ring
Use the outline* props to add a ring around the avatar
import { HStack, defineStyle } from '@chakra-ui/react'
import { Avatar } from '@saas-ui/react'
const ringCss = defineStyle({
outlineWidth: '2px',
outlineColor: 'colorPalette.500',
outlineOffset: '2px',
outlineStyle: 'solid',
})
export const AvatarWithRing = () => {
return (
<HStack gap="4">
<Avatar
name="David Wilson"
colorPalette="pink"
src="/avatars/1.png"
css={ringCss}
/>
<Avatar
name="Marcus Chen"
colorPalette="green"
src="/avatars/2.png"
css={ringCss}
/>
<Avatar
name="Sarah Johnson"
colorPalette="blue"
src="/avatars/3.png"
css={ringCss}
/>
</HStack>
)
}
Group
Use the Group component to group multiple avatars together
import { Avatar, AvatarGroup } from '@saas-ui/react'
export const AvatarWithGroup = () => {
return (
<AvatarGroup size="lg">
<Avatar src="/avatars/1.png" name="David Wilson" />
<Avatar src="/avatars/2.png" name="Marcus Chen" />
<Avatar src="/avatars/3.png" name="Sarah Johnson" />
<Avatar variant="solid" fallback="+3" />
</AvatarGroup>
)
}
Stacking
When using the AvatarGroup component, you can use the stacking prop to
change the stacking order of the avatars
'use client'
import { Stack } from '@chakra-ui/react'
import { Avatar, AvatarGroup } from '@saas-ui/react'
export const AvatarGroupWithStacking = () => {
return (
<Stack>
<AvatarGroup size="lg" stacking="last-on-top">
{items.map((item) => (
<Avatar key={item.name} src={item.src} name={item.name} />
))}
<Avatar fallback="+3" />
</AvatarGroup>
<AvatarGroup size="lg" stacking="first-on-top">
{items.map((item) => (
<Avatar key={item.name} src={item.src} name={item.name} />
))}
<Avatar fallback="+3" />
</AvatarGroup>
<AvatarGroup size="lg" spaceX="1" borderless>
{items.map((item) => (
<Avatar key={item.name} src={item.src} name={item.name} />
))}
<Avatar fallback="+3" />
</AvatarGroup>
</Stack>
)
}
const items = [
{
src: '/avatars/1.png',
name: 'David Wilson',
},
{
src: '/avatars/2.png',
name: 'Marcus Chen',
},
{
src: '/avatars/3.png',
name: 'Sarah Johnson',
},
]
Props
Root
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'The color palette of the component |
size | 'md' | 'full' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'The size of the component |
variant | 'solid' | 'solid' | 'subtle' | 'outline'The variant of the component |
shape | 'full' | 'square' | 'rounded' | 'full'The shape of the component |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
ids | Partial<{ root: string; image: string; fallback: string }>The ids of the elements in the avatar. Useful for composition. | |
onStatusChange | (details: StatusChangeDetails) => voidFunctional called when the image loading status changes. | |
borderless | 'true' | 'false'The borderless of the component | |
as | React.ElementTypeThe underlying element to render. | |
unstyled | booleanWhether to remove the component's style. |
Fallback
| Prop | Default | Type |
|---|---|---|
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Image
| Prop | Default | Type |
|---|---|---|
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |