Chip

import { Chip } from '@elirobinson/react/components/molecules/Chip';

import { Chip } from '@elirobinson/react/components/molecules/Chip';

export default function Basic() {
  return (
    <div className="demo-row">
      <Chip>Coaching</Chip>
      <Chip>Recipes</Chip>
      <Chip>AI consulting</Chip>
    </div>
  );
}

When to use it

Use Chip for a compact, removable tag — an active filter, a selected item in a multi-select field, a keyword attached to a piece of content. Without onRemove it's just a static tag; with it, a small × button appears. For a status label that's never removable, Badge is the simpler component.

Removable

Pass onRemove to get the dense remove button. It's sized to the shadcn/MUI scale, not the 44px primary-control minimum — a chip is an inline, dense affordance, not a button.

import { useState } from 'react';

import { Chip } from '@elirobinson/react/components/molecules/Chip';

export default function Removable() {
  const [tags, setTags] = useState(['Practice plans', 'U10', 'Soccer', 'Fall season']);

  const removeTag = (tag: string) => {
    setTags((current) => current.filter((item) => item !== tag));
  };

  return (
    <div className="demo-row">
      {tags.length === 0 ? (
        <p>No filters applied.</p>
      ) : (
        tags.map((tag) => (
          <Chip key={tag} onRemove={() => removeTag(tag)}>
            {tag}
          </Chip>
        ))
      )}
    </div>
  );
}

Props

Accessibility

• Renders a <span> wrapper around a label span and, when onRemove is passed, a native <button type="button"> for removal — everything else about the chip is non-interactive.
• The remove button's accessible name defaults to `Remove ${children}`. That only produces a correct label when children is a plain string — pass removeLabel explicitly when the content is an element (<b>Design</b> would otherwise stringify wrong).
• The remove button follows dense inline sizing (MUI/shadcn scale), not the 44px primary-control minimum, since a chip's own footprint is already small.
• Keyboard: the remove button is a native <button> — Tab reaches it, Enter and Space activate it. The chip body itself isn't focusable.
• The ref forwards to the outer <span>.

Related