Chip
A chip is a discrete interaction element conveying information that is filterable, cancelable, and clickable. More information about chips can be found in the Material Design documentation.
usage
npm install @graph-paper/core @graph-paper/chip
<script>
import { Chip, ChipSet } from '@graph-paper/chip';
</script>
<ChipSet>
<Chip>a plain chip</Chip>
<Chip disabled>a plain chip</Chip>
<Chip toggled={whichChip} on:click={() => { whichChip = true; }}>A</Chip>
<Chip toggled={whichChip} on:click={() => { whichChip = true; }}>B</Chip>
<Chip filterable toggled={whichChip} on:click={() => { whichChip = true; }}>
A filterable
</Chip>
<Chip filterable toggled={whichChip} on:click={() => { whichChip = true; }}>
B filterable
</Chip>
<Chip cancelable on:cancel={console.log}>
Cancelable Chip
</Chip>
</ChipSet>