Skip to main content
react-md

Chip

Chips represent input, attributes, or actions.

Simple Example

A chip can be created by using the Chip component and should normally have a onClick event handler.

"use client";

import { Chip } from "@react-md/core/chip/Chip";
import { type ReactElement } from "react";

export default function SimpleChipExample(): ReactElement {
  return (
    <Chip
      onClick={() => {
        // do something
      }}
    >
      Chip
    </Chip>
  );
}

Press Enter to start editing.

Chip Themes

The chip supports two themes: "solid" (default) and "outline".

import { Chip } from "@react-md/core/chip/Chip";
import { type ReactElement } from "react";

export default function ChipThemesExample(): ReactElement {
  return (
    <>
      <Chip theme="solid">Solid</Chip>
      <Chip theme="outline">Outlined</Chip>
    </>
  );
}

Press Enter to start editing.

Disabled Chip

A chip can be disabled by enabling the disabled prop which will update the styles and prevent click event handlers from working.

import { Chip } from "@react-md/core/chip/Chip";
import { type ReactElement } from "react";

export default function DisabledChipExample(): ReactElement {
  return (
    <>
      <Chip theme="solid" disabled>
        Solid
      </Chip>
      <Chip theme="outline" disabled>
        Outlined
      </Chip>
    </>
  );
}

Press Enter to start editing.

Chip with Addons

The Chip's children can be any renderable element like icons, avatars, or text but might require additional styling. Instead of providing icons and avatars as children, use the leftAddon and rightAddon props which will update the chip styles slightly.

import { Avatar } from "@react-md/core/avatar/Avatar";
import { Chip } from "@react-md/core/chip/Chip";
import CancelOutlinedIcon from "@react-md/material-icons/CancelOutlinedIcon";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import { type ReactElement } from "react";

export default function ChipWithAddonsExample(): ReactElement {
  return (
    <>
      <Chip leftAddon={<FavoriteIcon />}>Chip</Chip>
      <Chip rightAddon={<FavoriteIcon />}>Chip</Chip>
      <Chip
        leftAddon={<Avatar src="https://i.pravatar.cc/40?img=3" />}
        rightAddon={<CancelOutlinedIcon />}
      >
        Chip
      </Chip>
      <Chip
        leftAddon={<FavoriteIcon />}
        rightAddon={<Avatar src="https://i.pravatar.cc/40?img=3" />}
      >
        Chip
      </Chip>
    </>
  );
}

Press Enter to start editing.

Chip with Circular Progress

The Chip can also render the CircularProgress component since it updates the progress bar size to be the icon size by default. This is configurable by the core.$chip-progress-size and core.$chip-progress-width Sass variables.

"use client";

import { Chip } from "@react-md/core/chip/Chip";
import { CircularProgress } from "@react-md/core/progress/CircularProgress";
import { randomInt } from "@react-md/core/utils/randomInt";
import BrightnessHighIcon from "@react-md/material-icons/BrightnessHighIcon";
import BrightnessLowIcon from "@react-md/material-icons/BrightnessLowIcon";
import { type ReactElement, useEffect, useState } from "react";

export default function ChipWithCircularProgressExample(): ReactElement {
  const { enabled, loading, onClick } = useDemoState();

  let addon = enabled ? <BrightnessHighIcon /> : <BrightnessLowIcon />;
  if (loading) {
    addon = <CircularProgress aria-label="Loading" disableCentered />;
  }
  return (
    <>
      <Chip leftAddon={addon} onClick={onClick}>
        Toggle
      </Chip>
      <Chip rightAddon={addon} onClick={onClick}>
        Toggle
      </Chip>
    </>
  );
}

interface DemoStateHookResult {
  enabled: boolean;
  loading: boolean;
  onClick: () => void;
}

function useDemoState(): DemoStateHookResult {
  const [{ enabled, loading }, setState] = useState({
    loading: false,
    enabled: false,
  });

  useEffect(() => {
    if (!loading) {
      return;
    }

    const timeout = window.setTimeout(
      () => {
        setState((prevState) => ({
          loading: false,
          enabled: !prevState.enabled,
        }));
      },
      randomInt({ min: 3, max: 5 }) * 1000,
    );

    return () => {
      window.clearTimeout(timeout);
    };
  }, [loading]);
  const onClick = (): void => {
    if (loading) {
      return;
    }

    setState((prevState) => ({ ...prevState, loading: true }));
  };

  return {
    enabled,
    loading,
    onClick,
  };
}

Press Enter to start editing.

Selectable Chips

The Chip also supports a selected state which will render an icon when selected before the children by default.

"use client";

import { Chip } from "@react-md/core/chip/Chip";
import { useToggle } from "@react-md/core/useToggle";
import { type ReactElement } from "react";

export default function SelectableChipExample(): ReactElement {
  const { toggled, toggle } = useToggle();

  return (
    <>
      <Chip selected={toggled} onClick={toggle}>
        Chip
      </Chip>
      <Chip selected={toggled} onClick={toggle} theme="outline">
        Chip
      </Chip>
    </>
  );
}

Press Enter to start editing.

Selected Icon After Content

Enable the selectedIconAfter prop if the selected icon should appear after the children instead of before the children.

"use client";

import { Chip } from "@react-md/core/chip/Chip";
import { useToggle } from "@react-md/core/useToggle";
import { type ReactElement } from "react";

export default function SelectedIconAfterExample(): ReactElement {
  const { toggled, toggle } = useToggle();

  return (
    <>
      <Chip selected={toggled} onClick={toggle} selectedIconAfter>
        Chip
      </Chip>
      <Chip
        selected={toggled}
        onClick={toggle}
        selectedIconAfter
        theme="outline"
      >
        Chip
      </Chip>
    </>
  );
}

Press Enter to start editing.

Custom Selected Icon

The Chip component will use the selected icon from the ICON_CONFIG by default. The icon can also be changed on a single component by providing the selectedIcon prop.

"use client";

import { Chip } from "@react-md/core/chip/Chip";
import { useToggle } from "@react-md/core/useToggle";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import { type ReactElement } from "react";

export default function CustomSelectedIconExample(): ReactElement {
  const { toggled, toggle } = useToggle(true);

  return (
    <Chip selectedIcon={<FavoriteIcon />} selected={toggled} onClick={toggle}>
      Chip
    </Chip>
  );
}

Press Enter to start editing.

Themed Selected State

The Chip can also gain a selected background color instead of rendering an icon while selected by enabling the selectedThemed prop.

"use client";

import { Chip } from "@react-md/core/chip/Chip";
import { useToggle } from "@react-md/core/useToggle";
import { type ReactElement } from "react";

export default function ThemedSelectedStateExample(): ReactElement {
  const { toggled, toggle } = useToggle();

  return (
    <>
      <Chip selected={toggled} selectedThemed onClick={toggle}>
        Chip
      </Chip>
      <Chip selected={toggled} selectedThemed onClick={toggle} theme="outline">
        Chip
      </Chip>
    </>
  );
}

Press Enter to start editing.

Presentational Chips

If a chip is only used to represent an input or attributes, enable the noninteractive prop to render the chip as a span instead of a button or use the chip styling utility function.

It is recommended to use the chip styling utility function if none of the chip functionality is required to reduce bundle size.

Tag 1Tag 2Tag 3Tag 4Tag 5Tag 6
import { Chip } from "@react-md/core/chip/Chip";
import { chip } from "@react-md/core/chip/styles";
import { type ReactElement } from "react";

export default function PresentationalChipsExample(): ReactElement {
  return (
    <>
      <Chip noninteractive>Tag 1</Chip>
      <span className={chip()}>Tag 2</span>
      <Chip noninteractive theme="outline">
        Tag 3
      </Chip>
      <span className={chip({ theme: "outline" })}>Tag 4</span>
      <Chip noninteractive selected selectedThemed>
        Tag 5
      </Chip>
      <span className={chip({ selected: true, selectedThemed: true })}>
        Tag 6
      </span>
    </>
  );
}

Press Enter to start editing.