Chips

The guideline content on this page is synced with Figma and can be used as a source of truth. Open in Figma

Chips are designed for user input and have a limited set of interactions. For any other action use a button instead.

Anatomy

Leading icon (optional)
Container
Button label

States

Chips have the following states: Enabled, Hover, Pressed, Selected, Selected hover, Focused and Disabled.

Example
HTML

development/documentation/docs/chips/examples/states.html

<ul class="nav nav-pills">
	<li>
		<button type="button">Enabled</button>
	</li>
	<li class="hover">
		<button type="button">Hover</button>
	</li>
	<li>
		<button type="button" class="pressed">Pressed</button>
	</li>
	<li class="active">
		<button type="button" aria-selected="true">Selected</button>
	</li>
	<li class="active hover">
		<button type="button" aria-selected="true">Selected hover</button>
	</li>
	<li class="focus">
		<button type="button">Focused</button>
	</li>
	<li class="disabled">
		<button type="button" disabled>Disabled</button>
	</li>
</ul>

Selection

Users can filter content instantly by selecting a discrete chip; re-selecting it will remove the filter. As they only require one interaction, discrete chips are the default and preferred choice.

Example
HTML

development/documentation/docs/chips/examples/selection.html

<ul class="nav nav-pills demo-with-states">
	<li>
		<a href="#!" role="button">All</a>
	</li>
	<li>
		<a href="#!" role="button">Account</a>
	</li>
	<li class="active">
		<a href="#!" role="button" aria-selected="true">Selected</a>
	</li>
	<li>
		<a href="#!" role="button">Label</a>
	</li>
	<li>
		<a href="#!" role="button">Label</a>
	</li>
	<li>
		<a href="#!" role="button">Label</a>
	</li>
</ul>

Width

For a typical chip, having a minimum width is important to prevent it from looking like a single dot or a cramped, unreadable label if the text is very short.

A maximum width is also important to prevent the chip from growing too long. If a user enters an excessively long tag, the chip should not stretch across the entire screen. If the text is too long we truncate the text with an ellipsis.

Chip width constraints: minimum 65px, maximum 240px

Chips aren't buttons

Both chips and buttons prompt user actions and selections through visual cues. However, their roles differ:

Chips are dynamic, appearing as groups of interactive elements to enhance the user's current journey and encourage immediate action.

Buttons offer consistent, familiar calls to action, guiding users through the product for significant progression.

Accessibility

Keyboard interaction

All chips should be reachable via TAB and SHIFT+TAB keys.

Example
HTML

development/documentation/docs/chips/examples/keyboard-interaction.html

<ul class="nav nav-pills">
	<li>
		<button type="button">Label</button>
	</li>
	<li class="focus">
		<button type="button">Focused</button>
	</li>
	<li>
		<button type="button">Label</button>
	</li>
</ul>

Best practices

Use chips in groups of two or more to present users with a choice.

Don't

Chips shouldn't be presented as a single option.

Example
HTML

Keep labels in chips short and concise for better readability.

Example
HTML

development/documentation/docs/chips/examples/chips-width-dont.html

<ul class="nav nav-pills">
	<li>
		<button type="button">This is a very long label for a chip</button>
	</li>
</ul>

Don't

Avoid using long labels for chips.

Specs

Developer reference

The following sections describe supported functionality that is not part of the Figma design specification.

Basic design

The default chip style with all interactive states.

Example
HTML

development/documentation/docs/chips/examples/basic-design-default.html

<ul class="nav nav-pills">
	<li>
		<a href="#!" role="button">Normal</a>
	</li>
	<li class="hover">
		<a href="#!" role="button">Hover</a>
	</li>
	<li class="focus">
		<a href="#!" role="button">Focused</a>
	</li>
	<li class="active">
		<a href="#!" role="button" aria-selected="true">Active</a>
	</li>
	<li class="disabled">
		<a href="#!" role="button" tabindex="-1" aria-disabled="true">Disabled</a>
	</li>
</ul>

Design - Primary

Deprecated in v2.3. The primary chip variant (.nav-pills-primary) has been removed from the design. Use the default chip style instead. This variant will be removed in v3.0.

Example
HTML

development/documentation/docs/chips/examples/basic-design-primary.html

<ul class="nav nav-pills nav-pills-primary">
	<li>
		<a href="#!" role="button">Normal</a>
	</li>
	<li class="active">
		<a href="#!" role="button" aria-selected="true">Active</a>
	</li>
	<li class="disabled">
		<a href="#!" role="button" tabindex="-1" aria-disabled="true">Disabled</a>
	</li>
</ul>

Sizes - Large chips

Deprecated in v2.3. The large chip size (.nav-pills-lg) has been removed from the design. Use the default chip size (40px height) instead. This variant will be removed in v3.0.

Example
HTML

Default

development/documentation/docs/chips/examples/sizes.html

<p class="mb-4"><b>Default</b></p>
<ul class="nav nav-pills nav-pills-lg">
	<li>
		<a href="#!" role="button">Normal</a>
	</li>
	<li class="active">
		<a href="#!" role="button" aria-selected="true">Active</a>
	</li>
	<li class="disabled">
		<a href="#!" role="button" tabindex="-1" aria-disabled="true">Disabled</a>
	</li>
</ul>

Example
HTML

Primary

development/documentation/docs/chips/examples/sizes-primary.html

<p class="mb-4"><b>Primary</b></p>
<ul class="nav nav-pills nav-pills-primary nav-pills-lg ">
	<li>
		<a href="#!" role="button">Normal</a>
	</li>
	<li class="active">
		<a href="#!" role="button" aria-selected="true">Active</a>
	</li>
	<li class="disabled">
		<a href="#!" role="button" tabindex="-1" aria-disabled="true">Disabled</a>
	</li>
</ul>