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 | none | Photo URL. |
name | string | none | Initials and accessible name. |
alt | string | none | 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.