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>

Tone

The tone prop applies a semantic color treatment, which suits status badges and category tags. It defaults to neutral , the standard chip appearance.

Light
Blue
Zoho Puvi
Neutral
Info
Success
Warning
Danger 
<Chip tone="neutral">Neutral</Chip>
<Chip tone="info">Info</Chip>
<Chip tone="success">Success</Chip>
<Chip tone="warning">Warning</Chip>
<Chip tone="danger">Danger</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

tone ‘neutral’ | ‘info’ | ‘success’ | ‘warning’ | ‘danger’ ‘neutral’ Applies a semantic color treatment to the chip.
dismissible boolean false Determines whether the chip can be dismissed (removed) by the user.
disabled boolean false Disables the chip.
class string undefined Custom CSS class name for additional styling.

Events