AI Chip

Overview

Resources

Install

yarn add @camp/chip

Variations

Default AiChip (gradient appearance)

import { AiChip } from '@camp/chip';
 
<AiChip>Default Chip</AiChip>;

Pill appearance

AI chips can be displayed with a pill-like appearance for a more modern, rounded design.

import { AiChip } from '@camp/chip';
 
<AiChip type="pill">Default Chip</AiChip>;

Status AiChip

import { AiChip } from '@camp/chip';
 
<AiChip status="success">Success</AiChip>;
<AiChip status="warning">Warning</AiChip>;
<AiChip status="danger">Danger</AiChip>;
<AiChip status="neutral">Neutral</AiChip>;
<AiChip>No Status</AiChip>;

Interactive AiChip

Interactive AiChips include the AiFill icon by default, and on hover/focus/active states, the chip displays a gradient border. This is a variation on the standard interactive chip in the color midnight. These chips can be used side-by-side to differentiate items in a list generated by AI, such as within the Combobox (multiselect with AI options).

Additional props compatible with the Interactive AiChip:

import { AiChip } from '@camp/chip';
 
<AiChip type="interactive" themed={themed}>
  Small
</AiChip>
<AiChip
  type="interactive"
  size="small" // default size
  onDismiss={() => {}}
  themed={themed} // true by default
  dismissButtonProps={{ id: 'dismiss' }} // pass props to the dismiss button as needed
  wrapperId="wrapper"
>
  Small with dismiss
</AiChip>

Usage

Set up ThemeProvider

The AiChip component requires a styled-components ThemeProvider to be set up in your application. This is required regardless of whether you plan to use theming features. See the Styled Components & ThemeProvider guide for more details on setting up the ThemeProvider.

Note: Even if you don’t need theming support, you still need the ThemeProvider wrapper. The AiChip component will default to themed (light & dark) styling, unless you explicitly set the themed prop to false.

Best practices

• Use AI chips to clearly identify AI-generated content, features, or system states
• Keep chip text concise and descriptive, typically 2-4 words
• Ensure sufficient color contrast for accessibility
• Use consistent placement and styling across your application
• Consider the context where AI chips appear to avoid confusion with other UI elements

Content guidelines

AI chip content should be clear, concise, and immediately recognizable as AI-related.

Accessibility

Keyboard support

• AI chips are accessible via keyboard navigation
• Focus indicators provide clear visual feedback
• Screen readers announce the chip content and purpose

Color and contrast

• AI chips maintain sufficient color contrast ratios
• Text remains readable across different background colors
• Consider users with color vision deficiencies when implementing