Components
Avatar
A person or an account: their picture, or initials while it loads, when it fails or when there is none.
Web and mobile — the same component for React and React Native. Stable: its API only changes in a major version.
Why it is here. Used by Orochia.
When to use
- Next to a name: comments, creators, members, the signed-in account in a header.
Avatar.Groupto show who takes part (followers, collaborators) in little space.
When not to use
- For a product, a video or a place: use an image in a card.Use instead: Card
- As the only way to say who someone is: show their name too, or give the avatar an
alt.
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { Avatar } from "@krizaka/ui/avatar";Examples
With an image
A picture named by alt, with initials as fallback.
Fallback
No image: the initials.
Sizes
xs, sm, md (default), lg, xl.
Group
Avatar.Group with max: the others become +n.
Props
Avatar
Avatar (an image with a fallback) and Avatar.Group.
| Prop | Type | Default | Description |
|---|---|---|---|
alt | string | — | The image's text alternative (the person's name); empty when a visible name sits next to the avatar. |
fallback | ReactNode | — | Shown while the image loads, when it fails or when there is none: initials, an icon. |
size | AvatarSize | md | xs · sm · md · lg · xl. |
src | string | null | — | The image's URL; null or nothing shows the fallback. |
AvatarGroup
Overlapping avatars; past max, a +n avatar counts the rest.
| Prop | Type | Default | Description |
|---|---|---|---|
max | number | — | How many avatars are shown; the rest becomes a +n avatar. |
size | AvatarSize | — | The size of the +n avatar (match the avatars of the group). |
AvatarRoot
| Prop | Type | Default | Description |
|---|---|---|---|
alt | string | — | The image's text alternative (the person's name); empty when a visible name sits next to the avatar. |
fallback | ReactNode | — | Shown while the image loads, when it fails or when there is none: initials, an icon. |
size | AvatarSize | md | xs · sm · md · lg · xl. |
src | string | null | — | The image's URL; null or nothing shows the fallback. |
Accessibility
- With
alt, the picture is an image named by it; withoutalt, it is decorative — put the name in the text next to it. - The fallback initials are shown, not announced, when an
altnames the person.
Best practices
- Always pass a
fallback(initials) on the web: images fail, and the layout should not jump. - Use one size per list:
smin dense lists,mdby default,lg/xlon a profile. - In a group, set
maxso a long list ends with+ninstead of overflowing.
Related components
Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub