Chip

Chips are helpful elements that can be used to display selected options, filter content, or trigger actions. They provide a clear visual representation of discrete pieces of information and can be interactive or static depending on the use case.

Different types of chips serve various purposes in the user interface, from displaying information to enabling user interaction.

Basic Chip

Basic chips display simple information and are typically non-interactive. They're useful for showing tags, categories, or labels.

Clickable Chip

Clickable chips respond to user interaction and can trigger actions when clicked. They're useful for navigation or performing specific operations.

Deletable Chip

Deletable chips include a delete icon that allows users to remove them. They're commonly used for selected filters, tags, or form inputs.

Chips come in different visual styles to match various design needs and levels of emphasis.

Filled

Filled chips have a solid background color and are the default variant. They provide good contrast and visibility.

Outlined

Outlined chips have a transparent background with a border. They're useful when you need a lighter visual treatment.

Chips are available in different sizes to accommodate various use cases and design requirements.

Small

Small chips are compact and work well in dense layouts or when space is limited.

Medium

Medium chips are the default size and work well in most situations.

Logo chips combine icons with text labels to provide visual context and improve user recognition of different categories or actions.

Chips can use different colors to convey meaning, status, or to match your brand's color scheme.