Avatar
A person as initials or a photo, in lists, comments and assignee fields. With no name it draws the dashed unassigned circle.
- Avatar
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Avatar
ANANANJKŁ
Anna Nowak commented
Dark theme, Avatar
ANANANJKŁ
Anna Nowak commented
High contrast theme, Avatar
ANANANJKŁ
Anna Nowak commented
UsageLink to the section Usage
import { Avatar } from '@skribly/ui/brand'<Avatar name="Anna Nowak" />
<Avatar name="Jan Kowalski" src={user.photo} size="lg" />
<Avatar unassignedLabel="Unassigned" />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- An image named after the person.
- Set decorative when the name is written next to it, so it is not read twice.
- The unassigned circle is read only with unassignedLabel.
- A photo that fails to load falls back to the initials.
This demo runs through axe in all three themes on every test run. See what the tests check.