Avatar Button

A photo-avatar + name trigger button for opening a user account menu, iOS-style: a real portrait, not an icon.

Buttonsbuttonavatarmenu-trigger

Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.

Overview

Layout

Pill: avatar, name, chevron in a row

Avatar

Real photo, ring-2 ring-card for edge separation

Motion

200ms lift + shadow on hover, no color swap

Accessibility

Pair with aria-haspopup + aria-expanded