Thành phần
Avatar
Square avatar on Base UI Avatar: hairline frame, greyscale image, initials fallback from props.
Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.
Xem trước
JOJane Okafor
Install
bash
npx shadcn add @eloquent/avatarUsage
tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
<Avatar>
<AvatarImage src="/jane.jpg" alt="Portrait of Jane Okafor" />
<AvatarFallback>JO</AvatarFallback>
</Avatar>States
JOJOJO
| State | Treatment |
|---|---|
| Image loaded | Greyscale image fills the square |
| Image loading or failed | Initials fallback on tint-1 |
| Sizes | Set size-* through className |
Keyboard
This component is not interactive. It is not a tab stop, so Tab skips it.
| Key | Action |
|---|---|
| Tab | Skips it; not a tab stop |
Vietnamese
NANguyễn Thị Ánh
Ink adaptation
Upstream's circle (rounded-full) becomes a square (radius 0) with a 1px ink border. The image is greyscale (grayscale). The fallback is tint-1 with Barlow Condensed capitals.