Avatar

Avatars are used to represent users or entities in a system.

1
import { Avatar } from '@cerberus/react'

Usage

Preview Playground

gradient

size

ariaLabel

src

As Prop

You can use the as prop to render the Avatar component as a different element.

Style Customization

You can customize the avatar by utilizing the cx function.

Default Icon Customization

You can customize the default icon that shows by adding the avatar property to the defineIcons function at the root level of your app.

1
import { defineIcons } from '@cerberus/react'
2
import { CircleUser } from 'lucide-react'
3

4
defineIcons({
5
  avatar: CircleUser,
6
})

API

export type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> & {
  ariaLabel: string
  as?: never
  icon?: ReactNode
  src: string
  width?: number
  height?: number
}
export type AvatarAsProps = {
  as: ReactNode
  ariaLabel?: never
  icon?: ReactNode
  src?: never
  width?: never
  height?: never
}

export type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &
  AvatarVariantProps) &
  (AvatarImageProps | AvatarAsProps)

define function Avatar(props: AvatarProps): ReactNode

Props

The Avatar component accepts the following props:

Name	Default	Description
ariaLabel		The name of the avatar entity.
src		The source of the image.
as		A differnet element to render as the avatar.
height		The height of the avatar.
icon		A custom icon to render as fallback.
width		The width of the avatar.

1
import { Avatar } from '@cerberus/react'

Usage

Preview Playground

gradient

size

ariaLabel

src

As Prop

You can use the as prop to render the Avatar component as a different element.

Style Customization

You can customize the avatar by utilizing the cx function.

Default Icon Customization

You can customize the default icon that shows by adding the avatar property to the defineIcons function at the root level of your app.

1
import { defineIcons } from '@cerberus/react'
2
import { CircleUser } from 'lucide-react'
3

4
defineIcons({
5
  avatar: CircleUser,
6
})

API

export type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> & {
  ariaLabel: string
  as?: never
  icon?: ReactNode
  src: string
  width?: number
  height?: number
}
export type AvatarAsProps = {
  as: ReactNode
  ariaLabel?: never
  icon?: ReactNode
  src?: never
  width?: never
  height?: never
}

export type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &
  AvatarVariantProps) &
  (AvatarImageProps | AvatarAsProps)

define function Avatar(props: AvatarProps): ReactNode

Props

The Avatar component accepts the following props:

Name	Default	Description
ariaLabel		The name of the avatar entity.
src		The source of the image.
as		A differnet element to render as the avatar.
height		The height of the avatar.
icon		A custom icon to render as fallback.
width		The width of the avatar.

1
import { Avatar } from '@cerberus/react'

Usage

Preview Playground

gradient

size

ariaLabel

src

As Prop

You can use the as prop to render the Avatar component as a different element.

Style Customization

You can customize the avatar by utilizing the cx function.

Default Icon Customization

You can customize the default icon that shows by adding the avatar property to the defineIcons function at the root level of your app.

1
import { defineIcons } from '@cerberus/react'
2
import { CircleUser } from 'lucide-react'
3

4
defineIcons({
5
  avatar: CircleUser,
6
})

API

export type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> & {
  ariaLabel: string
  as?: never
  icon?: ReactNode
  src: string
  width?: number
  height?: number
}
export type AvatarAsProps = {
  as: ReactNode
  ariaLabel?: never
  icon?: ReactNode
  src?: never
  width?: never
  height?: never
}

export type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &
  AvatarVariantProps) &
  (AvatarImageProps | AvatarAsProps)

define function Avatar(props: AvatarProps): ReactNode

Props

The Avatar component accepts the following props:

Name	Default	Description
ariaLabel		The name of the avatar entity.
src		The source of the image.
as		A differnet element to render as the avatar.
height		The height of the avatar.
icon		A custom icon to render as fallback.
width		The width of the avatar.

1
import { Avatar } from '@cerberus/react'

Usage

Preview Playground

gradient

size

ariaLabel

src

As Prop

You can use the as prop to render the Avatar component as a different element.

Style Customization

You can customize the avatar by utilizing the cx function.

Default Icon Customization

You can customize the default icon that shows by adding the avatar property to the defineIcons function at the root level of your app.

1
import { defineIcons } from '@cerberus/react'
2
import { CircleUser } from 'lucide-react'
3

4
defineIcons({
5
  avatar: CircleUser,
6
})

API

export type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> & {
  ariaLabel: string
  as?: never
  icon?: ReactNode
  src: string
  width?: number
  height?: number
}
export type AvatarAsProps = {
  as: ReactNode
  ariaLabel?: never
  icon?: ReactNode
  src?: never
  width?: never
  height?: never
}

export type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &
  AvatarVariantProps) &
  (AvatarImageProps | AvatarAsProps)

define function Avatar(props: AvatarProps): ReactNode

Props

The Avatar component accepts the following props:

Name	Default	Description
ariaLabel		The name of the avatar entity.
src		The source of the image.
as		A differnet element to render as the avatar.
height		The height of the avatar.
icon		A custom icon to render as fallback.
width		The width of the avatar.