logo-icon
Chip
Chip
person
Castor Troy
person
Castor Troy
person
Castor Troy
person
Castor Troy
person
Castor Troy

svelte 
<script lang="ts">
	import { Chip } from 'stwui';
</script>

<Chip size="xs">
   <Chip.Avatar slot="avatar" src="image.png" />
   <Chip.Label slot="label">Castor Troy</Chip.Label>
</Chip>
<Chip size="sm" type="success">
   <Chip.Avatar slot="avatar" src="image.png" />
   <Chip.Label slot="label">Castor Troy</Chip.Label>
</Chip>

<Chip type="warn">
   <Chip.Avatar slot="avatar" src="image.png" />
   <Chip.Label slot="label">Castor Troy</Chip.Label>
</Chip>
<Chip size="lg" type="error">
   <Chip.Avatar slot="avatar" src="image.png" />
   <Chip.Label slot="label">Castor Troy</Chip.Label>
</Chip>
<Chip size="xl">
   <Chip.Avatar slot="avatar" src="image.png" />
   <Chip.Label slot="label">Castor Troy</Chip.Label>
</Chip>
Chip with Close
person
Castor Troy
person
Castor Troy

svelte 
<script lang="ts">
	import { Chip } from 'stwui';
</script>

<Chip type="info">
   <Chip.Avatar slot="avatar" src="image.png" />
   <Chip.Label slot="label">Castor Troy</Chip.Label>
   <Chip.Close slot="close" />
</Chip>
<Chip>
   <Chip.Avatar slot="avatar" src="image.png" />
   <Chip.Label slot="label">Castor Troy</Chip.Label>
   <Chip.Close slot="close" />
</Chip>

Chip Props

type 'info' | 'warn' | 'success' | 'error' | 'default' default
type 'xs' | 'sm' | 'md' | 'lg' | 'xl' md

Chip Slots

avatar <Chip.Avatar slot="avatar" />
label <Chip.Label slot="label" />
close <Chip.Close slot="close" />
default

Chip.Avatar Props

src string
alt string user-avatar

Chip.Label Slots

default