Chip

Updated

A small, interactive element that represents an entity, often displayed in a group.

Usage

To display a chip, pass a label to <Chip>.

Chip 1

Chip 2

Chip 3

import { Chip } from "stylus-ui/Chip";

export default () => (
  <div className="flex flex-wrap gap-1">
    <Chip label="Chip 1" />
    <Chip label="Chip 2" />
    <Chip label="Chip 3" />
  </div>
);

Avatars

To display an avatar with the chip, pass an avatar prop. It takes an AvatarProps object.

Nam-Chi Van

Ivan Salim

Ryan Bach

import { Chip } from "stylus-ui/Chip";

const users = [
  {
    id: "1",
    name: "Nam-Chi Van",
  },
  {
    id: "2",
    name: "Ivan Salim",
  },
  {
    id: "3",
    name: "Ryan Bach",
  },
];

export default () => (
  <div className="flex flex-wrap gap-1">
    {users.map((user) => (
      <Chip label={user.name} avatar={{ children: user.name, uuid: user.id }} />
    ))}
  </div>
);

Icons

Import a FontAwesome icon and pass it to the icon prop.

Images

Arbitrary images can be displayed by passing in an img object with src and alt properties.

MDN

import { Chip } from "stylus-ui/Chip";

export default () => (
  <Chip
    img={{
      src: "https://developer.mozilla.org/favicon.ico",
      alt: "MDN Favicon",
    }}
    label="MDN"
  />
);

Dark mode

Set theme to dark to use the dark theme.

Dark mode

With avatar

With icon

With image

import { Chip } from "stylus-ui/Chip";
import { faTag } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <div className="flex flex-wrap gap-1">
    <Chip label="Dark mode" theme="dark" />
    <Chip
      label="With avatar"
      avatar={{ children: "NS", uuid: "1" }}
      theme="dark"
    />
    <Chip label="With icon" icon={faTag} theme="dark" />
    <Chip
      label="With image"
      img={{
        src: "https://scribehow.com/favicon.ico",
        alt: "Scribe Favicon",
      }}
      theme="dark"
    />
    <Chip
      label="Clickable"
      onClick={() => null}
      onRemove={() => null}
      theme="dark"
    />
  </div>
);

Click events

To make the chip clickable, pass an onClick prop. Clickable chips have hover styles and a pointer cursor.

Passing an onRemove prop will add a remove button to the chip.

import { useState } from "react";
import { Chip } from "stylus-ui/Chip";
import { useToast } from "stylus-ui/Toast";
import { faArrowsRotate } from "@fortawesome/pro-regular-svg-icons";

const chips = [
  { label: "Google", favicon: "https://www.google.com/favicon.ico" },
  {
    label: "Wikipedia",
    favicon: "https://www.wikipedia.org/favicon.ico",
  },
  { label: "GitHub", favicon: "https://github.com/favicon.ico" },
  { label: "Scribe", favicon: "https://scribehow.com/favicon.ico" },
];

export default () => {
  const { toast } = useToast();
  const [hiddenChips, setHiddenChips] = useState<number[]>([]);

  return (
    <div className="flex flex-wrap gap-1">
      {chips.map(
        (chip, i) =>
          !hiddenChips.includes(i) && (
            <Chip
              label={chip.label}
              img={{ src: chip.favicon, alt: `${chip.label} favicon` }}
              onClick={() => toast({ title: `Clicked ${chip.label}` })}
              onRemove={() => setHiddenChips((prev) => [...prev, i])}
            />
          ),
      )}
      {hiddenChips.length > 0 && (
        <Chip
          icon={faArrowsRotate}
          label="Reset"
          onClick={() => setHiddenChips([])}
        />
      )}
    </div>
  );
};

API Reference

`Chip`

Inherits properties from HTMLElement.

Prop	Type	Default
`label`	`string`
`avatar`	`AvatarProps`
`icon`	`IconProps`
`img`	`{ src: string; alt: string }`
`onClick`	`MouseEventHandler<HTMLButtonElement>`
`onRemove`	`MouseEventHandler<HTMLButtonElement>`
`theme`	`"light""dark"`	`"light"`