Qwik avatar - Flowbite

Use the avatar component to show user profile images and placeholders in different sizes, colors and shapes based on Qwik and Tailwind CSS

The avatar component from Flowbite Qwik can be used to show a visual representation of a user or team account for your application based on multiple examples, colors, sizes and shapes.

All of the example are built as Qwik components and you can access custom props and methods to customize the component and you can also use Tailwind CSS classes to style the component.

To start using the avatar component you need to import it from the flowbite-qwik package :

import { Avatar } from "flowbite-qwik"

Default avatar

Here's a default example of the <Avatar> component where you can use the img prop to pass the image URL, the alt prop to pass a description of the image for accessibility and the rounded prop to make the avatar rounded.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Avatar } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2">
      <Avatar
        img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
        alt="avatar of Jese"
        rounded
      />
      <Avatar img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg" />
    </div>
  )
})

Avatar with border

Use the bordered prop to add a border style to the avatar.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Avatar } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2">
      <Avatar
        img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
        alt="avatar of Jese"
        rounded
        bordered
      />
      <Avatar img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg" bordered />
    </div>
  )
})

Avatar placeholder

If the user doesn't have an image you can simply don't use any image to show a placeholder image, and you can still pass the rounded prop to make the avatar rounded and other options.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Avatar } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2">
      <Avatar />
      <Avatar rounded />
    </div>
  )
})

Placeholder initials

Alternatively to the placeholder image you can use the placeholderInitials prop to show the user initials.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Avatar } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2">
      <Avatar placeholderInitials="RR" />
      <Avatar placeholderInitials="RR" rounded />
    </div>
  )
})

Dot indicator

You can use the status prop to show a dot indicator on the avatar, and you can use the statusPosition prop to change the position of the dot indicator. This is useful to show the user status like online, offline, busy, away, and more.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Avatar } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2">
      <Avatar
        img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
        status="online"
      />
      <Avatar
        img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
        rounded
        status="busy"
        statusPosition="top-right"
      />
      <Avatar
        img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
        status="offline"
        statusPosition="bottom-left"
      />
      <Avatar
        img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
        rounded
        status="away"
        statusPosition="bottom-right"
      />
    </div>
  )
})

Stacked layout

Stack multiple avatars together by using the <AvatarGroup> component and by passing the stacked prop to the child components of the group. The <AvatarCounter> component can be used to show the total number of avatars in the group by passing the total prop and a link to the href prop to view all users.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Avatar } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2">
      <Avatar.Group>
        <Avatar
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/on9fjbionkpt1fqhtbov.jpg"
          rounded
          stacked
        />
        <Avatar
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/g5dmxlpqgtkar6bb55b6.jpg"
          rounded
          stacked
        />
        <Avatar
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/jpnykkz8ojq7ojgg4qta.jpg"
          rounded
          stacked
        />
        <Avatar
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/v0w8f2cf2xxxas8ad1jl.jpg"
          rounded
          stacked
        />
        <Avatar
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
          rounded
          stacked
        />
      </Avatar.Group>
      <Avatar.Group>
        <Avatar
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/on9fjbionkpt1fqhtbov.jpg"
          rounded
          stacked
        />
        <Avatar
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/g5dmxlpqgtkar6bb55b6.jpg"
          rounded
          stacked
        />
        <Avatar
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/jpnykkz8ojq7ojgg4qta.jpg"
          rounded
          stacked
        />
        <Avatar
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/v0w8f2cf2xxxas8ad1jl.jpg"
          rounded
          stacked
        />
        <Avatar.GroupCounter total={99} href="#" />
      </Avatar.Group>
    </div>
  )
})

Avatar with text

Use this example to show an avatar with text (i.e. username, email, etc.) by passing the custom markup inside the <Avatar> component. This is useful for admin dashboard interfaces while the user is logged in.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Avatar } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Avatar img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg" rounded>
      <div class="space-y-1 font-medium dark:text-white">
        <div>Jese Leos</div>
        <div class="text-sm text-gray-500 dark:text-gray-400">Joined in August 2014</div>
      </div>
    </Avatar>
  )
})

Avatar dropdown

Use the <Dropdown> component to show a dropdown menu when clicking on the avatar component. This example is often used to show the user settings, account settings, and more.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Avatar, Dropdown } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="ml-16">
      <Dropdown
        as={
          <Avatar
            alt="User settings"
            img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
            rounded
          />
        }
      >
        <Dropdown.Item header>
          <span class="block text-sm">Bonnie Green</span>
          <span class="block truncate text-sm font-medium">bonnie@flowbite.com</span>
        </Dropdown.Item>
        <Dropdown.Item>Dashboard</Dropdown.Item>
        <Dropdown.Item>Settings</Dropdown.Item>
        <Dropdown.Item divider />
        <Dropdown.Item>Sign out</Dropdown.Item>
      </Dropdown>
    </div>
  )
})

Avatar colors

If you want to change the default color of the avatar component you can pass the color prop. Colors that you can choose from are gray, light, purple, success, pink, and more.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Avatar } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-col gap-3">
      <div class="flex flex-wrap gap-2">
        <Avatar
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
          rounded
          bordered
          color="gray"
        />
        <Avatar
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
          rounded
          bordered
          color="failure"
        />
        <Avatar
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
          rounded
          bordered
          color="purple"
        />
        <Avatar
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
          rounded
          bordered
          color="success"
        />
        <Avatar
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
          rounded
          bordered
          color="pink"
        />
      </div>
      <div class="flex flex-wrap gap-2">
        <Avatar
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
          bordered
          color="gray"
        />
        <Avatar
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
          bordered
          color="failure"
        />
        <Avatar
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
          bordered
          color="purple"
        />
        <Avatar
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
          bordered
          color="success"
        />
        <Avatar
          img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
          bordered
          color="pink"
        />
      </div>
    </div>
  )
})

Avatar sizes

Change the default size of the avatar component by passing the size prop. Sizes that you can choose from are xs, sm, md, lg, and xl.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Avatar } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap items-center gap-2">
      <Avatar img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg" size="xs" />
      <Avatar img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg" size="sm" />
      <Avatar img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg" size="md" />
      <Avatar img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg" size="lg" />
      <Avatar img="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg" size="xl" />
    </div>
  )
})

Override image element

You can override the default image element by passing the img prop to the <Avatar> component. This is useful if you want to use a different image element like <Image>

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Avatar } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-wrap gap-2">
      <Avatar
        img={
          <picture>
            <source
              media="(min-width: 900px)"
              srcset="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/jpnykkz8ojq7ojgg4qta.jpg"
            />
            <source
              media="(min-width: 480px)"
              srcset="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/v0w8f2cf2xxxas8ad1jl.jpg"
            />
            <img
              alt=""
              src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462567/flowbite-qwik/zqvjllre0haavqbwqw0f.jpg"
              height="48"
              width="48"
            />
          </picture>
        }
      />
    </div>
  )
})