Chip
Chips are compact elements that represent an input, attribute, or action.
setup
Import the Chip component in a script tag.
Svelte Copy
import { Chip } from "@mgisolutions/design-system/svelte";
basic usage
Basic usage Chip
Demonstrate
This is a Chip
Svelte Copy
<Chip label="This is a Chip" />
small
Chip with small size
Demonstrate
This is a small Chip
Svelte Copy
<Chip label="This is a small Chip" small={true} />
light
Chip with light mode
Demonstrate
This is a light Chip
Svelte Copy
<Chip label="This is a light Chip" light={true} />
removeable
Chip with 'remove' event
Demonstrate
This is a removeable Chip
Svelte Copy
<Chip label="This is a removeable Chip" removable={true}/>
Component Data
- props
- events
| Name | Description | Type | Default |
|---|---|---|---|
| label | The string used to show the chip | string | label |
| small | The size of the chip. | boolean | true |
| light | The mode of the chip. | boolean | true |
| removable | If set, then it displays a 'remove' icon that when clicked the chip emits 'remove' event | boolean | false |