Chip

Chips display information variables that pertain to items in the current window. They represent an entered value, a configuration element, or an action item. Multiple chips can be displayed in the same area.

Interactive Playground

The Interactive Playground allows you to experiment with various chip styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

Example
HTML
React
CodeSandbox
Storybook
<div class="neo-chip neo-chip--default">
  Example
</div>
<Chip
  avatarInitials=""
  icon=""
  variant="default"
>
  Example
</Chip>

Anatomy

Chips include the four components shown below. The icon and delete components are optional.

Image showing a chip, there are four notes pointed out and described below

  • Container:

    The container is left-justified and expands to the right to hold the text in the chip.

  • Text:

    Add a description of the chip’s function here.

  • Delete Chip:

    For chips that support it, select this icon to close the chip. This will deselect the function or remove an item from a list.

  • Icon:

    When enabled, the icon provides a visual representation of the function of the chip; information, notification, alert, etc. This should not be used for decoration but must be an aid to understanding what the chip represents.

States

Each chip can exist in one of 3 states. The chip’s state will change as the user moves around the screen.

Default
Image showing a chip in default state
Hover
Image showing a chip in hover state
Disabled
Image showing a chip in disabled state

  • Default:

    The standard form of the chip is used when it does not have focus and is not pressed.

  • Hover:

    Active when the mouse is moved over the chip or when keyboard navigation brings the focus to the chip.

  • Disabled:

    A disabled chip cannot be selected, clicked, or changed.

Type

There are multiple variants for each chip. The format and use of each is outlined below.

Default
Image showing a default chip
Info
Image showing an info chip
Success
Image showing a success chip
Warning
Image showing a warning chip
Alert
Image showing an alert chip

  • Default:

    Whenever the contents of a chip do not conform to one of the other types (Info, Success, Warning, Alert), use the Default type.

  • Info:

    The Info type provides feedback on the current state of something, or about what is happening.

  • Success:

    This type is used to show that an operation was completed without any issues or errors.

  • Warning:

    Use this type when an operation has encountered a problem and the process may not have been completed successfully.

  • Alert:

    Similar to the Warning type, but the problem is more severe and likely caused the process to fail.

Behavior

Displayed below are some examples of proper and improper usage of the Chip component.

Color

The background color of the chip indicates its function. Consider the intended function of the chip before selecting its color; gray, red, orange, blue or green.

An image of default, alert, warning, info and success chips

DO: Use the chip state that best fits the content. For example, use the Alert chip for errors. Learn more in Neo’s color guidelines.

An image of three info chips arranged horizontally

DON'T: Do not mix the type to achieve specific colors, or use the another state as the default.

Using an Icon

Icons can be placed within the chip to the left of the text to clarify its function and call attention to the chip. Icons may be included to the left of the text if it will help the user. They should never be used for purely cosmetic purposes.

An image of three chips with icons

DO: Add an icon to a chip if it will help the user to understand the attached function.

An image of chips with icons used for decoration

DON'T: Do not use icons for decoration. If it has no value, leave it out.

Expandable

Use an expandable chip when you need to provide additional information or action items. The default state of the chip is a single line of text that easily fits into restricted areas. When selected, the chip expands to reveal the full range of options available to the user.

An image of an expandable chip triggering a dropdown menu

DO: Use expandable chips to allow the user to change the value of the chip.

An image of a chip used in place of a form element'

DON'T: Do not use expandable chips in place of form fields or buttons.

Specs

Default chips have a height of 24 pixels. If the chip includes an avatar, then the height is increased to 36 pixels. The container is left justified and the width expands to the right as more text is added.

Chip with or without Icon
Image showing a chip with height shown to be 24 pixels
Chip with Avatar
Image of a chip with avatar with height shown to be 36 pixels

Keyboard Interactions

Accessibility requires that each item on the screen is reachable using the keyboard alone. The mouse is not always an option for some users. Keyboard navigation employs the following shortcuts.

Keystrokes Interaction
Tab Moves to the next chip or delete chip action.
Shift + Tab Moves to the previous chip or delete chip action.
Enter or Spacebar Activates the highlighted chip.
Delete Remove the chip if there is a delete chip action.
Backspace Removes a chip located within an input field.

Related Content

Components