blue
View on GitHub

Chip

A chip displays a compact element, often representing an entity, tag, or a piece of information.

Usage

Light
Blue
Zoho Puvi
Label 
<script>
	import { Chip } from 'deskblocks';
</script>

<Chip>Label</Chip>

Dismissible Chip

To make a chip dismissible, pass the dismissible prop. Once enabled, the chip can be removed by hovering over it and clicking the close icon.

Light
Blue
Zoho Puvi
Dismissible Chip 
<Chip dismissible>Dismissible Chip</Chip>

Chip with icon

Light
Blue
Zoho Puvi
Language 
<script>
	import { Chip, Icon } from 'deskblocks';
	import { IconSkills } from 'deskblocks/icons';
</script>

<Chip>
	<Icon slot="icon" icon={IconSkills} /> Language
</Chip>

Chip with avatar

Light
Blue
Zoho Puvi
Jenny 
<script>
	import { Chip, Avatar } from 'deskblocks';
</script>

<Chip>
	<Avatar slot="icon" size={20} src="/assets/avatar/pic3.jpg" /> Jenny
</Chip>

Disabled state

Light
Blue
Zoho Puvi
Languages
Language 
<script>
	import { Chip, Icon } from 'deskblocks';
	import { IconSkills } from 'deskblocks/icons';
</script>

<Chip disabled>Languages</Chip>
<Chip disabled>
	<Icon slot="icon" icon={IconSkills} /> Language
</Chip>

Slots

Props

Here is the completed description for the Chip component props:
dismissible boolean false Determines whether the chip can be dismissed (removed) by the user.
class string undefined Custom CSS class name for additional styling.

Events