Chip

Import

import { Chip } from '@blakeui/react';

Anatomy

Import the Chip component and access all parts using dot notation.

Plain-text children are automatically wrapped in <Chip.Label>.

<Chip>
  Label text
</Chip>

Usage

import {Chip} from "@blakeui/react";

export function ChipBasic() {
  return (
    <div className="flex flex-wrap items-center gap-3">

Variants

import {Chip, Separator} from "@blakeui/react";
import {CircleDashed} from "@gravity-ui/icons";
import React from "react";

export function ChipVariants() {

With Icons

import {Chip} from "@blakeui/react";
import {ChevronDown, CircleCheckFill, CircleFill, Clock, Xmark} from "@gravity-ui/icons";

export function ChipWithIcon() {
  return (

Statuses

import {Chip} from "@blakeui/react";
import {Ban, Check, CircleFill, CircleInfo, TriangleExclamation} from "@gravity-ui/icons";

export function ChipStatuses() {
  return (

Styling

Passing Tailwind CSS classes

You can style the root container and individual slots:

import {Chip} from '@blakeui/react';

function CustomChip() {
  return (
    <Chip className="rounded-full px-4 py-2 font-bold">
      <Chip.Label className="text-lg uppercase">
        Custom Styled
      </Chip.Label>
    </Chip>
  );
}

Customizing the component classes

To customize the Chip component classes, you can use the @layer components directive.
Learn more.

A worked example is in Styling.

blakeUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Chip component uses these CSS classes (View source styles):

Base Classes

• .chip - Base chip container styles
• .chip__label - Label text slot styles

Color Classes

• .chip--accent - Accent color variant
• .chip--danger - Danger color variant
• .chip--default - Default color variant
• .chip--success - Success color variant
• .chip--warning - Warning color variant

Variant Classes

• .chip--primary - Primary variant with filled background
• .chip--secondary - Secondary variant with border
• .chip--tertiary - Tertiary variant with transparent background
• .chip--soft - Soft variant with lighter background

Size Classes

• .chip--sm - Small size
• .chip--md - Medium size (default)
• .chip--lg - Large size

Compound Variant Classes

Chips support combining variant and color classes (e.g., .chip--secondary.chip--accent). The following combinations have default styles defined:

Primary Variants:

• .chip--primary.chip--accent - Primary accent combination with filled background
• .chip--primary.chip--success - Primary success combination with filled background
• .chip--primary.chip--warning - Primary warning combination with filled background
• .chip--primary.chip--danger - Primary danger combination with filled background

Soft Variants:

• .chip--accent.chip--soft - Soft accent combination with lighter background
• .chip--success.chip--soft - Soft success combination with lighter background
• .chip--warning.chip--soft - Soft warning combination with lighter background
• .chip--danger.chip--soft - Soft danger combination with lighter background

Note: You can apply custom styles to any variant-color combination (e.g., .chip--secondary.chip--accent, .chip--tertiary.chip--success) using the @layer components directive in your CSS.

API Reference

Chip Props

Chip.Label Props