Chip

Chips are complex entities in small blocks. Add a container element with the chip class. And add child text element, buttons or avatars with the avatar class.

slot

active

closable

avatar

name

status nullonlinebusyawayoffline

image nullavatar-1.pngavatar-2.pngavatar-3.pngavatar-4.pngavatar-5.png

<script>
    import {Chip} from 'svelte-spectre'
</script>

<Chip>Chip</Chip>
<Chip active>Active</Chip>
<Chip name="CP">Avatar</Chip>
<Chip name="CP" status="online">Online</Chip>
<Chip name="CP" status="busy">Busy</Chip>
<Chip name="CP" status="busy" closable>
    <img slot="avatar" src="{base}/img/avatar-1.png" alt="Albert Einstein" />Closable
</Chip>