Chips
The Chips come in the following variations: Default, label, closeable, outlined, pill. The default slot of Below is a collection of simple to complex examples. Any color from the Material Design palette can be used to change a chips color. Chips can use text or any icon available in any font library. Outlined chips inherit their border color from the current text color. Label chips have reduced border-radius. Chip component can have various sizes from Closable chips can be controlled by the active prop. You can also listen to the Chip
component is used to convey small pieces of information. Using the close property, the chip becomes interactive, allowing user interaction. Playground
Chip
will also accept avatars and icons alongside text. API
Examples
Colored
Icon
Outlined
Label
Sizes
x-small
to x-large
. Closable
on:close
event if you want to know when a chip has been closed.
Ready For More?
Continue to learn more about svelte materialify with content selected by the creator.