Avatar | tcpsystems/ui

Try it

Svelte

<Avatar name="Maya Chen" />

Examples

Team member

Team member.svelte

<script lang="ts">
	import Avatar from '@tcpsystems/ui/foundation/Avatar';
</script>

<Avatar name="Maya Chen" />

Sizes and shapes

MC MC MC AG

Sizes and shapes.svelte

<script lang="ts">
	import Avatar from '@tcpsystems/ui/foundation/Avatar';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
</script>

<Cluster>
	<Avatar name="Maya Chen" size="sm" />
	<Avatar name="Maya Chen" />
	<Avatar name="Maya Chen" size="lg" />
	<Avatar name="Acumen Gateway" shape="square" />
</Cluster>

Profile image

Profile image.svelte

<script lang="ts">
	import Avatar from '@tcpsystems/ui/foundation/Avatar';

	const src = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect width="40" height="40" fill="%232563eb"/><circle cx="20" cy="15" r="7" fill="%23fff"/><ellipse cx="20" cy="38" rx="15" ry="13" fill="%23fff"/></svg>';
</script>

<Avatar name="Maya Chen" {src} size="lg" />

Beside a name

Maya Chen · Platform engineer

Beside a name.svelte

<script lang="ts">
	import Avatar from '@tcpsystems/ui/foundation/Avatar';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
</script>

<Cluster>
	<Avatar name="Maya Chen" decorative />
	<span>Maya Chen · Platform engineer</span>
</Cluster>

API

Import

import Avatar from '@tcpsystems/ui/foundation/Avatar';

Prop	Type	Default
`name`	`string`	none
`src?`	`string`	none
`size?`	`'sm' \| 'md' \| 'lg'`	`'md'`
`shape?`	`'round' \| 'square'`	`'round'`
`decorative?`	`boolean`	`false`

Hook	Kind
`.tcp-avatar`	Root class
`data-cat`	Data attribute
`data-shape`	Data attribute
`data-size`	Data attribute