Avatar
GET STARTED
COMPONENTS
TYPES
Avatar
<script lang="ts">
import { Avatar } from 'stwui';
</script>
<Avatar src="image.png" size="xs" />
<Avatar src="image.png" size="sm" />
<Avatar src="broken-image.png" />
<Avatar src="image.png" size="lg" />
<Avatar src="image.png" size="xl" />Indicator
<script lang="ts">
import { Avatar } from 'stwui';
</script>
<Avatar size="xs" src="image.png">
<Avatar.Indicator slot="indicator" placement="bottom-right" />
</Avatar>
<Avatar size="sm" src="image.png">
<Avatar.Indicator slot="indicator" placement="bottom-right" />
</Avatar>
<Avatar src="image.png">
<Avatar.Indicator slot="indicator" placement="bottom-right" />
</Avatar>
<Avatar size="lg" src="image.png">
<Avatar.Indicator slot="indicator" placement="bottom-right" />
</Avatar>
<Avatar size="xl" src="image.png">
<Avatar.Indicator slot="indicator" placement="bottom-right" />
</Avatar>Initials
<script lang="ts">
import { Avatar } from 'stwui';
</script>
<Avatar size="xs" initials="CH" />
<Avatar size="sm" initials="CH" />
<Avatar initials="CH" />
<Avatar size="lg" initials="CH" />
<Avatar size="xl" initials="CH" />Avatar Group
<script lang="ts">
import { AvatarGroup } from 'stwui';
const avatars = [
'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80',
'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'
];
</script>
<AvatarGroup size="xs">
{#each avatars as avatar}
<AvatarGroup.Avatar src={avatar} />
{/each}
</AvatarGroup>
<br />
<AvatarGroup size="sm">
{#each avatars as avatar}
<AvatarGroup.Avatar src={avatar} />
{/each}
</AvatarGroup>
<br />
<AvatarGroup>
{#each avatars as avatar}
<AvatarGroup.Avatar src={avatar} />
{/each}
</AvatarGroup>
<br />
<AvatarGroup size="lg">
{#each avatars as avatar}
<AvatarGroup.Avatar src={avatar} class="ring-primary dark:ring-primary" />
{/each}
</AvatarGroup>
<br />
<AvatarGroup size="xl">
{#each avatars as avatar}
<AvatarGroup.Avatar src={avatar} />
{/each}
</AvatarGroup>Avatar Props
| src | string | |
| alt | string | avatar |
| shape | 'circle' | 'rounded' | 'square' | circle |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | md |
| initials | string |
Avatar Slots
| placeholder | <Avatar.Placeholder slot="placeholder" /> |
| indicator | <Avatar.Indicator slot="indicator" /> |
Avatar.Placeholder Slots
| icon | <Avatar.Placeholder.Icon slot="icon" /> |
| default |
Avatar.Placeholder.Icon Props
| icon | MaterialIcon |
Avatar.Indicator Props
| placement | 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left' | top-right |
AvatarGroup Props
| shape | 'circle' | 'rounded' | 'square' | circle |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | md |
AvatarGroup Slots
| default | <AvatarGroup.Avatar /> |
AvatarGroup.Avatar Props
| src | string | |
| alt | string | avatar |
| initials | string |
AvatarGroup.Avatar Slots
| placeholder | <Avatar.Placeholder slot="placeholder" /> |
| indicator | <Avatar.Indicator slot="indicator" /> |
AvatarGroup.Avatar.Placeholder Slots
| icon | <Avatar.Placeholder.Icon slot="icon" /> |
| default |
AvatarGroup.Avatar.Placeholder.Icon Props
| icon | MaterialIcon |
AvatarGroup.Avatar.Indicator Props
| placement | 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left' | top-right |