Data display
Avatar
A person’s picture, or their initials when there is none.
import { Avatar } from '@jsonresume/ui'Source(opens in a new tab)
Playground
Change the props and copy the result.
jsx
<Avatar name="Thomas Davis" size="lg" shape="square" src="https://…" />Examples
ALGHavatar/basic.tsx
import { Avatar, Stack } from '@jsonresume/ui';
export default function AvatarBasic() {
return (
<Stack direction="row" gap={4} align="center">
<Avatar
name="Thomas Davis"
src="https://avatars.githubusercontent.com/u/416209?v=4"
size="lg"
/>
<Avatar
name="Thomas Davis"
src="https://avatars.githubusercontent.com/u/416209?v=4"
/>
<Avatar name="Ada Lovelace" />
<Avatar name="Grace Hopper" size="sm" shape="circle" />
</Stack>
);
}Thomas Davis
Founder · @thomasdavis
AL
Ada Lovelace
Maintainer · @ada
Show code
avatar/team.tsx
import { Avatar, Link, Stack, Text } from '@jsonresume/ui';
const team = [
{
name: 'Thomas Davis',
role: 'Founder',
github: 'thomasdavis',
photo: 'https://avatars.githubusercontent.com/u/416209?v=4',
},
{ name: 'Ada Lovelace', role: 'Maintainer', github: 'ada', photo: null },
];
// The team page pattern: square avatar, name, role, one link.
export default function AvatarTeam() {
return (
<Stack gap={4}>
{team.map((p) => (
<Stack key={p.name} direction="row" gap={3} align="center">
<Avatar name={p.name} src={p.photo} />
<Stack gap={0}>
<Text weight="semibold">{p.name}</Text>
<Text size="xs" tone="muted">
{p.role} ·{' '}
<Link href={`https://github.com/${p.github}`}>@{p.github}</Link>
</Text>
</Stack>
</Stack>
))}
</Stack>
);
}Accessibility
- name is required: it is the alt text and the fallback’s accessible name.
Props
<Avatar>
| Prop | Type | Default | Description |
|---|---|---|---|
| name required | string | – | The person's name: used for the alt text and the initials fallback. |
| shape | squarecircle | square | |
| size | smmdlg | md | |
| src | string | null | – |