Chip

Chips are compact elements that represent an input, attribute, or action.

Default

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">
   <Chip.Avatar slot="avatar" src="no-image.png" />
   <Chip.Label slot="label">Castor Troy</Chip.Label>
</Chip>
<Chip size="xl" type="error">
   <Chip.Avatar slot="avatar" src="image.png" />
   <Chip.Label slot="label">Castor Troy</Chip.Label>
</Chip>

With Close

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.Avatar Slots

placeholder

<Avatar.Placeholder slot="placeholder" />

Chip.Avatar.Placeholder Slots

icon

Chip.Label Slots

default