Chip 10.17.4

ARIA

RTL

Chip component is typically used to filter or trigger actions in clickable format.

For example, in a UI, you might use a <Chip /> component for:

Represent a selected filter category among a list
Tag associated with an item

The characteristics of a <Chip /> component are its small size, simplicity and ability to perform actions on a click

Default

"use client";

import { Chip } from "@heathmont/moon-core-tw";

const Default = () => <Chip className="border border-beerus">Default</Chip>;

export default Default;

Different sizes

It supports two different sizes: small and medium. By default, if not specified by the prop size, it renders as medium.

The possible values is sm (small) or md (medium).

"use client";

import { Chip } from "@heathmont/moon-core-tw";

const Sizes = () => (
  <>
    <Chip className="border border-beerus" size="sm">
      Small
    </Chip>
    <Chip className="border border-beerus">Medium is Default</Chip>
  </>
);

export default Sizes;

Disabled status

By passing any truthy value to the prop disabled, the component will prevent the click from the user.

"use client";

import { Chip } from "@heathmont/moon-core-tw";

const Disabled = () => (
  <>
    <Chip variant="ghost" disabled>
      Ghost variant
    </Chip>
    <Chip className="border border-beerus" disabled>
      Default variant
    </Chip>
  </>
);

export default Disabled;

Active state

Utilize the isActive prop to activate the state, set it as active by default, or maintain it in an always-active state.

Hobbies (Poker is mandatory):

"use client";

import { Chip } from "@heathmont/moon-core-tw";
import { useCallback, useState } from "react";

const sports = ["basket", "football", "cricket"];

const IsActive = () => {
  const [isActive, setIsActive] = useState<string[]>([]);
  const onClick = useCallback(
    (item: string) => {
      if (isActive.includes(item)) {
        setIsActive((prev: string[]) =>
          prev.filter((sport: string) => sport !== item),
        );
      } else {
        setIsActive([...isActive, item]);
      }
    },
    [setIsActive, isActive],
  );

  return (
    <div className="flex items-center gap-2 mt-2">
      <p className="text-moon-14">Hobbies (Poker is mandatory):</p>
      <Chip className="border border-beerus" isActive>
        Poker
      </Chip>
      {sports.map((item: string) => (
        <Chip
          className="border border-beerus"
          onClick={() => onClick(item)}
          isActive={isActive.includes(item)}
          isStroke
          key={item}
        >
          {item}
        </Chip>
      ))}
    </div>
  );
};

export default IsActive;

Chip as block element

Utilize the as prop to specify the chip as a DIV.

I am not a button

"use client";

import { Chip } from "@heathmont/moon-core-tw";

const Default = () => (
  <Chip className="border border-beerus" as="div">
    I am not a button
  </Chip>
);

export default Default;

Displaying icons

Using the props iconRight, iconLeft, iconOnly is possible to pass icons to the <Chip /> component.

Small:

Medium:

"use client";

import { Chip } from "@heathmont/moon-core-tw";
import { OtherFrame } from "@heathmont/moon-icons-tw";

const sharedProps = {
  className: "border border-beerus",
};

const Icons = () => (
  <>
    <div className="flex flex-wrap items-center justify-start gap-2 w-full">
      <p>Small:</p>
      <Chip
        {...sharedProps}
        size="sm"
        iconLeft={<OtherFrame className="text-moon-24" />}
      >
        Left Icon
      </Chip>
      <Chip
        {...sharedProps}
        size="sm"
        iconRight={<OtherFrame className="text-moon-24" />}
      >
        Right Icon
      </Chip>
      <Chip
        {...sharedProps}
        size="sm"
        iconRight={<OtherFrame className="text-moon-24" />}
        iconLeft={<OtherFrame className="text-moon-24" />}
      >
        Left/Right Icons
      </Chip>
      <Chip
        {...sharedProps}
        size="sm"
        iconOnly={<OtherFrame className="text-moon-24" />}
        aria-label="Single icon"
      />
    </div>
    <div className="flex flex-wrap items-center justify-start gap-2 w-full">
      <p>Medium:</p>
      <Chip {...sharedProps} iconLeft={<OtherFrame className="text-moon-24" />}>
        Left Icon
      </Chip>
      <Chip
        {...sharedProps}
        iconRight={<OtherFrame className="text-moon-24" />}
      >
        Right Icon
      </Chip>
      <Chip
        {...sharedProps}
        iconRight={<OtherFrame className="text-moon-24" />}
        iconLeft={<OtherFrame className="text-moon-24" />}
      >
        Left/Right Icons
      </Chip>
      <Chip
        {...sharedProps}
        iconOnly={<OtherFrame className="text-moon-24" />}
        aria-label="Single icon"
      />
    </div>
  </>
);

export default Icons;

Show stroke on hover

Setting the isStroke prop to any truthy value will display the stroke on hover/active.

"use client";

import { Chip } from "@heathmont/moon-core-tw";
import { OtherFrame } from "@heathmont/moon-icons-tw";

const StrokeOnHover = () => (
  <>
    <Chip className="border border-beerus" isStroke>
      Hover me
    </Chip>
    <Chip
      iconRight={<OtherFrame className="text-moon-24" />}
      isStroke
      className="border border-beerus"
    >
      Right Icon
    </Chip>
    <Chip
      className="border border-beerus"
      iconLeft={<OtherFrame className="text-moon-24" />}
      isStroke
    >
      Left Icon
    </Chip>
  </>
);

export default StrokeOnHover;

Variants

If the background of the element should not be visible, you can use the "ghost" variant by passing it through the variant prop to hide the default background.

"use client";

import { Chip } from "@heathmont/moon-core-tw";

const Variants = () => (
  <>
    <Chip variant="ghost">Ghost variant</Chip>
    <Chip className="border border-beerus">Default variant</Chip>
  </>
);

export default Variants;

Adding onClick function

Using the props onClick you can execute a custom function whenever the <Chip /> component is clicked by the user,

"use client";

import { Chip } from "@heathmont/moon-core-tw";

const WithOnClick = () => (
  <Chip className="border border-beerus" onClick={() => alert("Chip clicked")}>
    Click me
  </Chip>
);
export default WithOnClick;

Customization

You can use the className prop to assign any CSS classes to the <Chip /> component.

"use client";

import { Chip } from "@heathmont/moon-core-tw";
import { useCallback, useState } from "react";

const Customization = () => {
  const [isActive, setIsActive] = useState(false);
  const onClick = useCallback(() => {
    setIsActive(!isActive);
  }, [setIsActive, isActive]);

  return (
    <>
      <Chip
        onClick={onClick}
        isActive={isActive}
        isStroke
        className={
          isActive
            ? "outline-none text-bulma hover:text-chichi shadow shadow-bulma hover:shadow-bulma"
            : "border border-beerus text-chichi hover:bg-chichi-10 hover:shadow-none"
        }
      >
        Custom Chip
      </Chip>
    </>
  );
};

export default Customization;

Chip

These are props specific to the Chip component:

Name	Type	Default
children	"React.ReactNode"	-
disabled	boolean	false
iconLeft	"React.ReactNode"	-
iconRight	"React.ReactNode"	-
iconOnly	"React.ReactNode"	-
isActive	boolean	false
isStroke	boolean	false
size	"sm" \| "md"	"md"
variant	"default" \| "ghost"	default
as	"button" \| "div" \| "span"	button