Avatar

It's more than just an image with a border radius, I promise.

import { Avatar } from '@thoody-consulting/components'

function Example({ user }) {
    return (
        <>
            <Avatar className="size-6" src={user.avatarUrl} />
            <Avatar className="size-8" src={user.avatarUrl} />
            <Avatar className="size-10" src={user.avatarUrl} />
        </>
    )
}

Component API

Prop	Default	Description
Avatarextends the JSX `<span>` element
`src`	-	The URL of the avatar image.
`square`	`false`	Whether to make the avatar square.
`initials`	-	The initials to use when no `src` is provided.
AvatarButtonextends the Headless UI `Button` component or the `Link` component
`src`	-	The URL of the avatar image.
`square`	`false`	Whether to make the avatar square.
`initials`	-	The initials to use when no `src` is provided.
`href`	-	The target URL when using the button as a link.

Examples

Basic example

Use the Avatar component along with a size-* utility to render an avatar image:

import { Avatar } from '@thoody-consulting/components'

function Example({ user }) {
    return (
        <>
            <Avatar className="size-6" src={user.avatarUrl} />
            <Avatar className="size-8" src={user.avatarUrl} />
            <Avatar className="size-10" src={user.avatarUrl} />
        </>
    )
}

With initials

Use the initials prop to render an avatar with initials:

import { Avatar } from '@thoody-consulting/components'

function Example({ user }) {
    return (
        <>
            <Avatar initials="tw" className="size-6 bg-zinc-900 text-white dark:bg-white dark:text-black" />
            <Avatar initials="tw" className="size-8 bg-zinc-900 text-white dark:bg-white dark:text-black" />
            <Avatar initials="tw" className="size-10 bg-zinc-900 text-white dark:bg-white dark:text-black" />
        </>
    )
}

Be sure to include bg-{color} and text-{color} utilities for both light mode and dark mode.