Chip

Chips are interactive elements that appear as users apply filters, showing their current selections. Unlike Tags, they represent subjects or other filters that the user has chosen.

Demo

{{> eds-c-chip}}

When to use this component

Use the Chip component to let users see what filters they have selected and remove them if they need to.

When not to use this component

Do not use the Chip component:

to categorise content (use Tags instead)
to communicate status (use Badges instead)
as a replacement for primary navigation
when interaction is not required

Chip sizes

Size	Description
Default	Uses smaller typography and reduced padding to work in spaces with lots of information.
Large	For use when additional prominence or readability is required.

<div class="eds-l-stack" style="--eds-l-stack--gap: 1rem;">
	{{#each .}}
		<div>
			{{> eds-c-chip}}
		</div>
	{{/each}}
</div>

Content rules

Text within a chip must:

use short, scannable labels (1 to 3 words is best)
use sentence case
avoid punctuation or truncation unless absolutely necessary

Layout and positioning

Support wrapping, consistent spacing, logical grouping, and alignment with surrounding content.

Place chips in the context of a parent element. For example, a group of filter chips collected under a heading "Current filters".

Group related chips logically (for example filters list cluster).

Consider adding a link that clears all filters.

Chip as search current filter

{{#heading}}
	<h{{level}}>{{text}}</h{{level}}>
{{/heading}}
<ul class="eds-l-cluster" style="--eds-l-cluster--gap: 1rem;">
	{{#each filters}}
		<li>
			{{> eds-c-chip}}
		</li>
	{{/each}}
</ul>
{{#clearFilters}}
	<a href="{{linkHref}}">{{linkText}}</a>
{{/clearFilters}}

How it works

Installation

To install the components, go to the get started guide for developers.

To use the Chip component, enter the following command in your Terminal:

npm install @springernature/elements

Styles

Import the styles of the Chip component into your scss file:

@import '../path/to/@springernature/elements/components/eds-c-chip';

Configuration

To view all the properties of this component, go to the schema.

Name	Type	Description	Required
`text`	String	Text for the chip.	✅
`actionText`	String	Visually hidden text describing the chip's action (for example "Remove filter") for assistive technology.	✅
`href`	String	Link for the chip.	✅
`large`	Boolean	Enables large chip size.
`dataAttributes`	String	Use to define any data attributes that you need in the chip link.

Help improve this page

If you have a question, idea, or suggestion to improve this component or guidance, post in the Ask Elements Teams channel.