Avatar
Stands for a person or a team by their initials.
The frame above shows the real web components, in the mode this site is in.
The design preview shows it next to every other web component.
When to use it
Section titled “When to use it”- Assistive technology gets the full name. The small size has room for one letter.
Example
Section titled “Example”import { Avatar } from "@acme/ui";
<Avatar name="Ada Lovelace" />Options
Section titled “Options”The web component’s props. The other platforms take the same options under their own naming conventions.
| Prop | Type | Notes |
|---|---|---|
name |
string |
Required. |
size |
"sm" | "md" | "lg" |
Defaults to md. |
Source
Section titled “Source”| Platform | File |
|---|---|
| Web (React) | packages/ui/src/Avatar.tsx |
| Desktop (GPUI) | crates/acme-ui/src/controls.rs |
| React Native | packages/ui-native/src/Avatar.tsx |
| Compose Multiplatform | kotlin/ui/src/commonMain/kotlin/acme/ui/Avatar.kt |