Avatar
Avatars are used to show a thumbnail representation of an individual or business in the interface.
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 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.Indicator Props
| placement | 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left' | top-right |