Chip

Chip

The Chip component displays a compact label that can represent a value, category, status, or interactive item. Chips can include an avatar or icon, and can optionally provide a delete action.

import Chip from "rocksolidjs/Chip";

export default function Example() {
  const handleDelete = (event: MouseEvent) => {
    console.log("Chip deleted", event);
  };
  return (
    <div class="flex gap-4">
      <Chip
        label="Chip 1"
        variant="solid"
        onDelete={handleDelete}
        onClick={(e) => {}}
      />
      <Chip
        label="Chip 2"
        onDelete={handleDelete}
      />
    </div>
  );
}

Examples

Colors

Use the color prop to communicate the semantic meaning of the chip.

import Chip  from "rocksolidjs/Chip";

export default function Example() {
  return (
    <div class="flex gap-2">
      <Chip label="Default" color="default" />
      <Chip label="Success" color="success" />
      <Chip label="Warning" color="warning" />
      <Chip label="Info" color="info" />
      <Chip label="Error" color="error" />
    </div>
  );
}

Variants

Use the variant prop to control the visual style of the chip.

import Chip  from "rocksolidjs/Chip";

export default function Example() {
  return (
    <div class="flex gap-4">
      <Chip label="Solid" variant="solid" />
      <Chip label="Filled" variant="filled" />
      <Chip label="Outlined" variant="outlined" />
    </div>
  );
}

Size

Use the size prop to control the overall size of the chip.

import Chip  from "rocksolidjs/Chip";

export default function Example() {
  return (
    <div class="flex gap-4 items-center">
      <Chip label="Small" size="small" />
      <Chip label="Medium" size="medium" />
      <Chip label="Large" size="large" />
    </div>
  );
}

Avatar

Use the avatar prop to display an avatar before the chip label.

import Avatar  from "rocksolidjs/Avatar";
import Chip  from "rocksolidjs/Chip";

export default function Example() {
  return (
    <Chip
      label="John Doe"
      avatar={<Avatar src="https://i.pravatar.cc/100?img=11" size="small" />}
    />
  );
}

Avatars are useful when a chip represents a person, account, or other entity with a visual identity.

Icon

Use the icon prop to display an icon before the chip label.

import Chip  from "rocksolidjs/Chip";
import type { ComponentProps } from "solid-js";

export default function Example() {
  return (
    <Chip
      label="SolidJS"
      icon={<SolidIcon aria-hidden />}
    />
  );
}

const SolidIcon = (
  props: ComponentProps<"svg">,
) => (
  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16">
    <path d="M0 0h16v16H0z" fill="none" />
    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1.5 11.575Q6.05 14.5 8 14.5c1.625 0 2.6-.975 2.6-2.275S9.625 9.95 8 9.95q-1.95 0-6.5 1.625" />
    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.45 8.975Q8 7.35 9.95 7.35c1.625 0 2.6.975 2.6 2.275c0 .48-.133.915-.382 1.274l-1.874 2.486m4.206-8.96C11.9 2.475 9.3 1.5 8 1.5c-1.326 0-1.702.301-2.222 1.004M1.5 11.575l1.95-2.6m11.05-4.55l-1.95 2.6m-6.772-4.52l-1.92 2.411" />
    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M5.02 8.43c-.981-.31-1.57-.961-1.57-2.055c0-1.625.975-2.275 2.6-2.275c1.097 0 3.307.694 5.329 2.083a75 75 0 0 1 1.171.842l-1.496.51" />
  </svg>
);

Delete

Use the onDelete prop to make a chip dismissible or removable.

import Chip  from "rocksolidjs/Chip";

export default function Example() {
  const handleDelete = (event: MouseEvent) => {
    console.log("Chip deleted", event);
  };
  return (
    <Chip
      label="Removable"
      onDelete={handleDelete}
    />
  );
}

The onDelete callback receives the mouse event generated by the delete action. Use it to remove the chip or perform another action.

A custom delete icon can be provided with the deleteIcon prop.

Disabled

Use the disabled prop to prevent interaction with the chip.

import Chip  from "rocksolidjs/Chip";

export default function Example() {
  return (
    <div class="flex gap-4">
      <Chip label="Disabled" disabled />
      <Chip label="Disabled" variant="outlined" disabled />
      <Chip label="Disabled with delete" disabled onDelete={() => {}} />
    </div>
  );
}

When disabled is true, the chip is visually presented as disabled and does not respond to interactive actions such as deleting the chip.

Clickable

Use the onClick prop to make a Chip interactive. When onClick is provided, the Chip becomes focusable and clickable.

import Chip  from "rocksolidjs/Chip";

export default function Example() {
  const handleClick = (event: MouseEvent) => {
    console.log("Chip clicked", event);
  };
  return (
    <Chip
      label="Click me"
      onClick={handleClick} 
    />
  );
}

Customization

Use slotProps to customize the delete icon and label.

import Chip  from "rocksolidjs/Chip";

export default function Example() {
  return (
    <Chip
      label="Custom label"
      onDelete={() => {}}
      slotProps={{
        label: {
          class: "font-semibold",
        },
        deleteIcon: {
          class: "text-red-500",
        },
      }}
    />
  );
}

Accessibility

  • Keep chip labels short and meaningful.
  • Do not rely on color alone to communicate important information.
  • Ensure icons and avatars do not obscure the meaning of the label.
  • When a chip provides a delete action, ensure the action has an accessible name and is understandable without relying on visual appearance.
  • Use sufficient color contrast between the chip content and its background.
  • Use disabled when the chip should not be interactive.
  • If a chip represents an important status, make sure the status is also available in an accessible text form.

API

Chip

The Chip component supports labels, avatars, icons, delete actions, colors, visual variants, disabled state, and slot-level customization.

Prop Type Required Default Description
avatar JSXElement No — An avatar displayed before the chip label.
color "default" | "success" | "warning" | "info" | "error" No "default" Controls the semantic color of the chip.
deleteIcon JSXElement No — A custom icon displayed for the delete action.
disabled boolean No false Disables the chip and prevents interactive actions.
icon JSXElement No — An icon displayed before the chip label.
label string Yes — The text displayed inside the chip.
onClick (event: MouseEvent) => void No — Callback invoked when the Chip is clicked.
onDelete (event: MouseEvent) => void No — Callback invoked when the chip’s delete action is triggered.
size "small" | "medium" | "large" No "medium" Controls the size of the chip.
slotProps { deleteIcon?: object; label?: object } No — Provides props to customize the Chip slots.
  • deleteIcon — Props for the delete icon slot.
  • label — Props for the label slot. Accepts TypographyProps.
variant "solid" | "filled" | "outlined" No "filled" Controls the visual style of the chip.
  • Avatar — Use Avatar when displaying standalone user or entity representations.
  • Badge — Use Badge for small indicators or counts attached to another element.
  • Typography — Use Typography to control text presentation and styling.