Avatar
An image element with a fallback for representing the user. Supports profile pictures, initials, badges, multiple sizes, and customizable border radius for flexible user interface designs.
Import
import { Avatar } from "@sparrowengg/twigs-react";Usage
<Avatar
src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=512&h=512&dpr=2&q=80"
name="hermione"
size="5xl"
/>
<Avatar
src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=512&h=512&dpr=2&q=80"
name="hermione"
size="3xl"
>
<AvatarBadge />
</Avatar>Examples
Avatar group with different variants
Props
Avatar
| Prop | Type | Default |
|---|---|---|
size? | xs | sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl | sm |
src? | string | - |
name? | string | - |
rounded? | xs | sm | md | lg | xl | 2xl | 3xl | full | full |
fallbackDelay? | number | 0 |
css? | object | - |
Avatar Group
| Prop | Type | Default |
|---|---|---|
size? | xs | sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl | sm |
rounded? | xs | sm | md | lg | xl | 2xl | 3xl | full | full |
limit? | number | 0 |
limitExceededLabel? | string | - |
Accordion
A vertically stacked set of interactive headings that each reveal a section of content. Perfect for organizing content in collapsible sections with smooth animations and accessibility features.
Chip
Compact UI element used to display tags, labels, or filter options. Perfect for categorization, selection states, and interactive content organization.