Chips

The Chip component is used to convey small pieces of information. Using the close property, the chip becomes interactive, allowing user interaction.

Playground

Chips come in the following variations: Default, label, closeable, outlined, pill. The default slot of Chip will also accept avatars and icons alongside text.

Chip Component
Options

API

Examples

Below is a collection of simple to complex examples.

Colored

Any color from the Material Design palette can be used to change a chips color.

Icon

Chips can use text or any icon available in any font library.

Outlined

Outlined chips inherit their border color from the current text color.

Label

Label chips have reduced border-radius.

Sizes

Chip component can have various sizes from x-small to x-large.

Closable

Closable chips can be controlled by the active prop. You can also listen to the 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.



Last Updated: 2022-10-03