Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Avatar examples · Square

Avatar with Verification Check (Square) for React

A square avatar with a blue verified badge at its bottom corner.

Framework
UI library

On a square avatar, a verified badge marks an official organization, a first-party integration or a vetted partner. This React avatar is rounded-lg, with a check badge in the info color on a small background-colored circle at its bottom corner, and a visually hidden Verified label. Use it in app marketplaces and workspace directories.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the avatar squared off around the check?

rounded-lg is on Avatar, AvatarImage, and AvatarFallback, and after:rounded-lg is on Avatar. The check is a separate circle on the wrapper, so it doesn't take those classes.

How is the checkmark built?

A span at -end-1 -bottom-1 is size-4, rounded-full, and bg-background. BadgeCheckIcon uses fill-info and text-background, at size-full.

How is the check announced?

The icon is aria-hidden. Visually hidden "Verified" in the span is the name.

Which corner does the check use?

The bottom end, via -end-1 -bottom-1 on a relative w-fit wrapper. The end edge flips in a right-to-left page.

What shows if the image fails?

AvatarFallback shows CN with rounded-lg. AvatarImage still has alt and width and height of 32.

How do I recolor the check?

Replace fill-info. text-background is the cutout of the check mark, and bg-background is the chip behind the icon.

All 14 avatar examples