Chip

Chips are text visually styled to differentiate and make it easy for users to visually parse and categorize their data. They can be used to identify statuses, categories, or other forms of metadata.

Overview

Resources

Install

yarn add @camp/chip

Upgrading to Next Gen

🎨 Updated color palette and style refresh: Aligned styling with our refreshed brand standards, delivering a modernized and cohesive look and feel.

🔄 Unified component with type prop: Simplified imports and usage by consolidating chip types into a single, versatile component with a type prop. Import chip once, and have all variations of chip available to you.

🧩 Nested component access: Allows direct access to inner components, giving developers more control over tooltips, state management, and custom interactions.

Previous implementation

Previously, different chip types required separate imports for each variant. You can now implement the component with a single import and the type prop as follows:

//Default Chip
import { Chip } from 'activecampaign/camp-components-chip';
 
<Chip color="mint">
  Chip Text
</Chip>
 
// Interactive Chip
import { ChipInteractive } from '@activecampaign/camp-components-chip';
 
<ChipInteractive color="mint">
  Chip Text
</ChipInteractive>
 
// Status Chip
import { ChipStatus } from '@activecampaign/camp-components-chip';
 
<ChipStatus color="mint">
  Chip Text
</ChipPromo>
 
// Promotional Chip
import { ChipPromo } from '@activecampaign/camp-components-chip';
 
<ChipPromo>
  Chip Text
</ChipPromo>

New implementation

You can now implement the component with a single import and the type prop as follows:

import { Chip } from '@camp/chip';
 
<Chip type="interactive" color="moss">
  Chip Text
</Chip>;

Migration steps

1. Update import path: Replace the old chip imports with Chip from @camp/chip.
2. Add type prop: This is optional. Use the type prop to specify the type of chip. Options includetype="interactive" type="promo" type="status". Not specifying the type will provide the default chip styling.
3. Update color values: Update color values in accordance with the design. Replace old color values like mint with the new ones (such as moss).

Variations

Primary chip

There are intentionally very few differences in primary default chip implementation in order to make migration easy. Please note that the color options available are different now as they utilize our fresh new color palette and styling system.

import { Chip } from '@camp/chip';
 
<Chip color="moss" data-testid="moss-default-chip-content" type="default">
  Chip text
</Chip>;

Interactive chip

The interactive chip makes the chip component actionable. Interacting with the chip oftentimes brings up settings related to the chip’s contents.

import { Chip } from '@camp/chip';
 
<Chip color="ac-blue" data-testid="ac-blue-interactive-chip-content" type="interactive">
  Chip text
</Chip>;

Dismissable chips provide the user with an easy way to remove a chip. This is often used for filters or to remove content from a specific categorization.

import { Chip } from '@camp/chip';
 
<Chip color="moss" data-testid="moss-interactive-chip-content" type="interactive">
  Chip text
</Chip>;

Dismiss tooltip

 
<Chip
  type="interactive"
  color="ac-blue"
  dismissButtonTooltipProps={{
    content: 'Dismiss',
    placement: 'top',
  }}
>
  Interactive Chip
</Chip>

Content tooltip

 
<Chip
  color="ac-blue"
  contentTooltipProps={{
    content: 'Content',
    placement: 'top',
  }}
  dismissButtonTooltipProps={{
    content: 'Dismiss',
    placement: 'top',
  }}
  type="interactive"
>
  Interactive Chip W/ Both Tooltips
</Chip>

Prop changes

Status chip

Status chips indicate the status of an item.

import { Chip } from '@camp/chip';
 
<Chip type="status" status="success">
  Chip text
</Chip>;

Prop changes

Promo chip

Promo chips are to be used as an indication of a new or beta feature and always retain the ocean background color.

import { Chip } from '@camp/chip';
 
<Chip type="promo">Chip text</Chip>;

Checkbox chip

Checkbox chips allow users to select multiple options from a group. They are a good alternative to checkboxes when you prefer to display options horizontally.

import { CheckboxGroup, CheckboxChip } from '@camp/chip';
 
const [values, setValues] = useState([]);
 
function handleChange(options) {
  setValues(options);
  console.log('Selected Checkbox Values:', options);
}
 
<CheckboxGroup
  label="Checkbox Chip Group"
  helperText="This is helper text"
  onChange={handleChange}
  values={values}
>
  <CheckboxChip value="one" label="Option One" />
  <CheckboxChip value="two" label="Option Two" />
  <CheckboxChip value="three" label="Option Three" />
  <CheckboxChip value="four" label="Option Four" />
  <CheckboxChip value="five" label="Option Five" />
  <CheckboxChip value="six" label="Option Six" />
</CheckboxGroup>;

Placement

Checkbox chip groups can be placed inline with content regularly just like a checkbox group would be. Lines should not wrap any more than three lines. If wrapping more than three lines, consider using a multi-select dropdown for your use case.

Content

Chips should be written as succinctly as possible, with no more than three words per chip, but should be clear and easy to understand. Keep in mind that chips can be much longer when translated into different languages and the amount of space the grouping takes in English may not be the same in every language.

Interaction

Like checkboxes, chips can be selected and unselected. None (if permitted), one, or multiple chips can be selected. A chip group must have more than chip in it, although it is encouraged that to make the most of the component to have at least three options in the group.

Usage

Best practices

• In many cases, users can define which color they want to set to represent their Label or List. In some other cases, chips have an established color that cannot be changed. By default, the slate chip is a safe chip to use for anything neutral, with the semantic color chips working well for anything that may be related to success, warning, or danger.
• Pay mind to chip placement so that it doesn’t appear to close to a button, so that it doesn’t get confused for another button.

Content guidelines

Most of the time, chip labels are defined by the user as they reflect their custom Lists and Labels. When chips are system-defined, they should be written in sentence case with no punctuation at the end, and as consise as possible.

Accessibility

Keyboard support

• Move focus to a chip using the tab key, and tab again to move to the dismiss indicator if applicable (use shift + tab to move backwards)
• To interact with an interactive chip when it has keyboard focus, press the space or enter key