Chip

Interactive compact elements for tags, filters, or selections.

Guidelines

We have the Chip and Badge components. Here are the guidelines for using them:

• Use chips to represent tags, filters, or interactive elements.
• Use badges to represent status, counts, or static elements.

If you need a multiple tag selector, please consider using the combobox component for more complex use cases.

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

import { Chip, ChipButton } from "components/selia/chip";

Structure

The expected structure and composition of the component.

<Chip>
  <ChipButton />
</Chip>

Props

Each component part, its responsibility, and the props it exposes.

Examples

Variants

Chips come in a variety of variants, each with its own color and style.

Size

Chips come in a variety of sizes, each with its own height and font size.

Icon

Chips can also contain icons, which are used to represent the chip's content.