AI Chip

Overview

Resources

Install

yarn add @camp/ai-chip

Variations

Gradient appearance (default)

import { AIChip } from '@camp/ai-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/ai-chip';
 
<AIChip type="pill">Default Chip</AIChip>;

Status Chips

Success

import { AIChip } from '@camp/ai-chip';
 
<AIChip status="success">Default Chip</AIChip>;

Warning

import { AIChip } from '@camp/ai-chip';
 
<AIChip status="warning">Default Chip</AIChip>;

Danger

import { AIChip } from '@camp/ai-chip';
 
<AIChip status="danger">Default Chip</AIChip>;

Neutral

import { AIChip } from '@camp/ai-chip';
 
<AIChip status="neutral">Default Chip</AIChip>;

Usage

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