Avatar
A person or a company: a picture, else initials.
Example
<script lang="ts">
import { Avatar } from '@onlywin/ui-svelte';
</script>
<div class="example-row">
<Avatar name="Ada Lovelace" size="lg" />
<Avatar name="Kestrel Play" tone="sun" />
<Avatar name="Grace Hopper" tone="candy" />
<Avatar name="Orbit Casino" tone="neutral" size="sm" />
</div>Usage
Do
- Pass the full name; initials come from it.
Don’t
- Do not use it for things that are not people or companies.
Accessibility
- The avatar is an image named by the person or company.
Props
The same props in both frameworks. In React, class is className, events are camelCase (onClick),
content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use,
and elementRef reaches the DOM element.
| Prop | Type | Default | Description |
|---|---|---|---|
name
*required | string | — | |
size | 'lg' | 'md' | 'sm' | 'md' | |
src | string | — | |
tone | 'brand' | 'candy' | 'neutral' | 'sun' | 'neutral' |