Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Avatar examples · Standard

Avatar with Verification Check (Standard) for React

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

Framework
UI library

The blue check is how people tell a real account from an impostor. This React avatar puts a check badge in the info color on a small background-colored circle at the bottom corner of a round avatar, with a visually hidden Verified label for screen readers. Use it for official accounts, verified creators and staff in comments and 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 checkmark built?

The avatar sits in a relative w-fit wrapper. A span at -end-1 -bottom-1 is a size-4 circle with bg-background, and BadgeCheckIcon fills it with fill-info and text-background.

How is the check announced?

The icon is aria-hidden. A visually hidden "Verified" in the same span is the accessible name.

How is the check positioned?

The span is absolute on the bottom end corner. -end-1 follows the writing direction, so the check moves in a right-to-left page.

How do I change the check color?

fill-info paints the badge and text-background punches the check. Swap fill-info for another fill token to recolor it.

What if the photo fails?

AvatarImage sets alt and a 32 by 32 size. AvatarFallback shows CN when the image is missing or fails. The check stays on the wrapper.

Can the check say something other than Verified?

Yes. Change the visually hidden text. The icon stays aria-hidden, so that text is the only thing announced.

All 14 avatar examples