`Chip` is a compact, interactive component used for displaying information, selections, or actions.

Features:

- Can be selected, deselected, or removed - Supports prefix and suffix elements (icons, avatars, etc.) - Clickable for toggling selection or triggering actions - Can be used in groups for multi-select scenarios

Usage:

- Use chips for tags, filters, selections, or compact actions - Combine with prefix/suffix elements for richer context - Use the `onRemove` prop to make chips removable

Best Practices:

- Keep chip labels concise - Use icons or color indicators for additional meaning - Ensure sufficient contrast and accessible focus indicators

Accessibility:

- Fully accessible to screen readers and keyboard users - Removable chips provide accessible remove buttons - Prefix and suffix elements should be decorative or have accessible labels if meaningful Basic: Shows a simple, static Chip. - Use for displaying a single tag or label.

Selected: Demonstrates a selectable Chip.

- Click to toggle selection state. - Useful for filter chips or multi-select scenarios.

OnRemove: Demonstrates removable Chips with selection.

- Chips can be selected/deselected and removed from the group. - Useful for tag input, filter lists, or dynamic chip groups.

Prefix: Demonstrates a Chip with a prefix element (e.g., icon, color dot).

- Use for status indicators, avatars, or icons before the label.

Suffix: Demonstrates a Chip with a suffix element (e.g., icon).

- Use for actions, status, or icons after the label.