Documentação

Avatar

Um elemento de imagem com um fallback para representar o usuário.

"use client";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@blips/ui/components/avatar";
export default function AvatarDemo() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  );
}

Instalação


pnpm add @blips/ui

Uso

import { Avatar, AvatarFallback, AvatarImage } from "@blips/ui/components/avatar"

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Exemplos

Básico

Um componente de avatar básico com uma imagem e um fallback.

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@blips/ui/components/avatar";

export default function AvatarDemo() {
  return (
    <Avatar>
      <AvatarImage
        src="https://github.com/shadcn.png"
        alt="@shadcn"
        className="grayscale"
      />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  );
}

Badge

Use o componente AvatarBadge para adicionar um badge ao avatar. O badge é posicionado no canto inferior direito do avatar.

Carregando…

import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarImage,
} from "@blips/ui/components/avatar";

export function AvatarWithBadge() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
      <AvatarBadge className="bg-green-600 dark:bg-green-800" />
    </Avatar>
  );
}

Badge com Ícone

Você também pode usar um ícone dentro de <AvatarBadge>.

Carregando…

import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarImage,
} from "@blips/ui/components/avatar";
import { Plus } from "@phosphor-icons/react";

export function AvatarBadgeIconExample() {
  return (
    <Avatar className="grayscale">
      <AvatarImage src="https://github.com/pranathip.png" alt="@pranathip" />
      <AvatarFallback>PP</AvatarFallback>
      <AvatarBadge>
        <Plus />
      </AvatarBadge>
    </Avatar>
  );
}

Grupo de Avatares

Use o componente AvatarGroup para adicionar um grupo de avatares.

CNLRER

Carregando…

import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarImage,
} from "@blips/ui/components/avatar";

export function AvatarGroupExample() {
  return (
    <AvatarGroup className="grayscale">
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
        <AvatarFallback>LR</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage
          src="https://github.com/evilrabbit.png"
          alt="@evilrabbit"
        />
        <AvatarFallback>ER</AvatarFallback>
      </Avatar>
    </AvatarGroup>
  );
}

Contagem do Grupo de Avatares

Use <AvatarGroupCount> para adicionar uma contagem ao grupo.

CNLRER

Carregando…

import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@blips/ui/components/avatar";

export function AvatarGroupCountExample() {
  return (
    <AvatarGroup className="grayscale">
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
        <AvatarFallback>LR</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage
          src="https://github.com/evilrabbit.png"
          alt="@evilrabbit"
        />
        <AvatarFallback>ER</AvatarFallback>
      </Avatar>
      <AvatarGroupCount>+3</AvatarGroupCount>
    </AvatarGroup>
  );
}

Grupo de Avatares com Ícone

Você também pode usar um ícone dentro de <AvatarGroupCount>.

CNLRER

Carregando…

import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@blips/ui/components/avatar";
import { Plus } from "@phosphor-icons/react";

export function AvatarGroupCountIconExample() {
  return (
    <AvatarGroup className="grayscale">
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
        <AvatarFallback>LR</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage
          src="https://github.com/evilrabbit.png"
          alt="@evilrabbit"
        />
        <AvatarFallback>ER</AvatarFallback>
      </Avatar>
      <AvatarGroupCount>
        <Plus />
      </AvatarGroupCount>
    </AvatarGroup>
  );
}

Tamanhos

Use a prop size para alterar o tamanho do avatar.

CNCNCN

Carregando…

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@blips/ui/components/avatar";

export function AvatarSizeExample() {
  return (
    <div className="flex flex-wrap items-center gap-2 grayscale">
      <Avatar size="sm">
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar size="lg">
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
    </div>
  );
}

Você pode usar o componente Avatar como gatilho para um menu dropdown.

Carregando…

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@blips/ui/components/avatar";
import { Button } from "@blips/ui/components/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@blips/ui/components/dropdown-menu";

export function AvatarDropdown() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon" className="rounded-full">
          <Avatar>
            <AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
            <AvatarFallback>CN</AvatarFallback>
          </Avatar>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-32">
        <DropdownMenuGroup>
          <DropdownMenuItem>Profile</DropdownMenuItem>
          <DropdownMenuItem>Billing</DropdownMenuItem>
          <DropdownMenuItem>Settings</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem variant="destructive">Log out</DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Referência da API

Avatar

O componente Avatar é o componente raiz que envolve a imagem do avatar e o fallback.

Prop	Tipo	Padrão
`size`	`"default" \| "sm" \| "lg"`	`"default"`
`className`	`string`	-

AvatarImage

O componente AvatarImage exibe a imagem do avatar. Ele aceita todas as props de Radix UI Avatar Image.

Prop	Tipo	Padrão
`src`	`string`	-
`alt`	`string`	-
`className`	`string`	-

AvatarFallback

O componente AvatarFallback exibe um fallback quando a imagem falha ao carregar. Ele aceita todas as props de Radix UI Avatar Fallback.

Prop	Tipo	Padrão
`className`	`string`	-

AvatarBadge

O componente AvatarBadge exibe um indicador de badge no avatar, normalmente posicionado no canto inferior direito.

Prop	Tipo	Padrão
`className`	`string`	-

AvatarGroup

O componente AvatarGroup exibe um grupo de avatares com estilo sobreposto.

Prop	Tipo	Padrão
`className`	`string`	-

AvatarGroupCount

O componente AvatarGroupCount exibe um indicador de contagem em um grupo de avatares, normalmente mostrando o número de avatares adicionais.

Prop	Tipo	Padrão
`className`	`string`	-

Para mais informações sobre as props de Radix UI Avatar, consulte a documentação do Radix UI.

AnteriorAspect Ratio PróximoBadge