Avatar
Avatars are used to show a thumbnail representation of an individual or business in the interface.
Usage
import { Avatar } from 'stwui';
import Avatar from 'stwui/avatar';
<script lang="ts">
import { Avatar } from 'stwui';
</script>
<Avatar src="image.png" size="xs" />
<Avatar src="image.png" size="sm" />
<Avatar src="image.png" />
<Avatar src="image.png" size="lg" />
<Avatar src="image.png" size="xl" />
Broken Image Fallback
<script lang="ts">
import { Avatar } from 'stwui';
</script>
<Avatar src="broken_image.png" size="xs" />
<Avatar src="broken_image.png" size="sm" />
<Avatar src="broken_image.png" />
<Avatar src="broken_image.png" size="lg" />
<Avatar src="broken_image.png" size="xl" />
With Indicator
<script lang="ts">
import { Avatar } from 'stwui';
</script>
<Avatar size="xs" src="image.png">
<Avatar.Indicator slot="indicator" placement="top-left" />
</Avatar>
<Avatar size="sm" src="image.png">
<Avatar.Indicator slot="indicator" placement="top-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-left" />
</Avatar>
<Avatar size="xl" src="image.png">
<Avatar.Indicator slot="indicator" placement="top-left" />
</Avatar>
<script lang="ts">
import { Avatar } from 'stwui';
</script>
<Avatar src="image.png" size="xs" shape="rounded" />
<Avatar src="image.png" size="sm" shape="rounded" />
<Avatar src="image.png" shape="rounded" />
<Avatar src="image.png" size="lg" shape="rounded" />
<Avatar src="image.png" size="xl" shape="rounded" />
<Avatar src="image.png" size="xs" shape="square" />
<Avatar src="image.png" size="sm" shape="square" />
<Avatar src="image.png" shape="square" />
<Avatar src="image.png" size="lg" shape="square" />
<Avatar src="image.png" size="xl" shape="square" />
With 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 | |
| placeholder | boolean | true |
Avatar Slots
| placeholder | <Avatar.Placeholder slot="placeholder" /> |
| indicator | <Avatar.Indicator slot="indicator" /> |
Avatar.Indicator Props
| placement | 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left' | top-right |
Avatar Class Identifiers
| stwui-avatar |
| stwui-avatar-container |
| stwui-avatar-indicator |
| stwui-avatar-placeholder |
| stwui-avatar-placeholder-icon |
