Avatar
A person or a workspace: the photo when it loads, initials when it doesn't.
import { Avatar } from "@flinbu/seed";Sizes and shapes
import { Avatar } from "@flinbu/seed";
<Avatar size="xs" name="Ana Ruiz" />
<Avatar size="sm" name="Tomás Gil" />
<Avatar name="Felipe Linares" />
<Avatar size="lg" name="Seed" shape="square" />Use it for
- square for workspaces and organizations.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | – | Photo URL. |
name | string | – | Initials and accessible name. |
alt | string | – | Overrides the accessible name. |
size | 'xs''sm''md''lg' | 'md' | 24, 32, 40 or 48 px. |
shape | 'circle''square' | 'circle' | square for organizations. |
Accessibility
- Named by alt or name; initials are hidden from screen readers.