Chip

Small informational badges for displaying labels, statuses, and categories

Import

import { Chip } from "heroui-solid";

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

DefaultAccentSuccessWarningDanger

1
2
3
4
5
6
7
8
9
10
11
12
13import { Chip } from "heroui-solid"

export function ChipBasic() {
  return (
    <div class="flex flex-wrap items-center gap-3">
      <Chip>Default</Chip>
      <Chip color="accent">Accent</Chip>
      <Chip color="success">Success</Chip>
      <Chip color="warning">Warning</Chip>
      <Chip color="danger">Danger</Chip>
    </div>
  )
}

Variants

lg

accent

default

success

warning

danger

primary

Label

secondary

Label

tertiary

Label

soft

Label

md

accent

default

success

warning

danger

primary

Label

secondary

Label

tertiary

Label

soft

Label

sm

accent

default

success

warning

danger

primary

Label

secondary

Label

tertiary

Label

soft

Label

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67import { CircleDashed } from "gravity-icons-solid"
import { Chip, Separator } from "heroui-solid"
import { For, Show } from "solid-js"

export function ChipVariants() {
  const sizes = ["lg", "md", "sm"] as const
  const variants = ["primary", "secondary", "tertiary", "soft"] as const
  const colors = ["accent", "default", "success", "warning", "danger"] as const

  return (
    <div class="flex flex-col gap-8 overflow-x-auto">
      <For each={sizes}>
        {(size, index) => (
          <>
            <div class="flex flex-col gap-4">
              <h3 class="text-sm font-semibold text-muted capitalize">
                {size}
              </h3>
              {/* Color labels header */}
              <div class="flex items-center gap-3">
                <div class="w-24 shrink-0" />
                <For each={colors}>
                  {(color) => (
                    <div
                      class="flex shrink-0 items-center justify-center"
                      style={{ width: "130px" }}
                    >
                      <span class="text-xs text-muted capitalize">{color}</span>
                    </div>
                  )}
                </For>
              </div>
              <div class="flex flex-col gap-3">
                <For each={variants}>
                  {(variant) => (
                    <div class="flex items-center gap-3">
                      <div class="w-24 shrink-0 text-sm text-muted capitalize">
                        {variant}
                      </div>
                      <For each={colors}>
                        {(color) => (
                          <div
                            class="flex shrink-0 items-center justify-center"
                            style={{ width: "130px" }}
                          >
                            <Chip color={color} size={size} variant={variant}>
                              <CircleDashed />
                              <Chip.Label>Label</Chip.Label>
                              <CircleDashed />
                            </Chip>
                          </div>
                        )}
                      </For>
                    </div>
                  )}
                </For>
              </div>
            </div>
            <Show when={index() < sizes.length - 1}>
              <Separator />
            </Show>
          </>
        )}
      </For>
    </div>
  )
}

With Icons

InformationCompletedPendingFailedLabel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35import {
  ChevronDown,
  CircleCheckFill,
  CircleFill,
  Clock,
  Xmark
} from "gravity-icons-solid"
import { Chip } from "heroui-solid"

export function ChipWithIcon() {
  return (
    <div class="flex flex-wrap items-center gap-3">
      <Chip>
        <CircleFill width={6} />
        <Chip.Label>Information</Chip.Label>
      </Chip>
      <Chip color="success">
        <CircleCheckFill width={12} />
        <Chip.Label>Completed</Chip.Label>
      </Chip>
      <Chip color="warning">
        <Clock width={12} />
        <Chip.Label>Pending</Chip.Label>
      </Chip>
      <Chip color="danger">
        <Xmark width={12} />
        <Chip.Label>Failed</Chip.Label>
      </Chip>
      <Chip color="accent">
        <Chip.Label>Label</Chip.Label>
        <ChevronDown width={12} />
      </Chip>
    </div>
  )
}

Statuses

DefaultActivePendingInactive

New FeatureAvailableBetaDeprecated

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52import {
  Ban,
  Check,
  CircleFill,
  CircleInfo,
  TriangleExclamation
} from "gravity-icons-solid"
import { Chip } from "heroui-solid"

export function ChipStatuses() {
  return (
    <div class="flex flex-col gap-4">
      <div class="flex flex-wrap items-center gap-3">
        <Chip variant="primary">
          <CircleFill width={6} />
          <Chip.Label>Default</Chip.Label>
        </Chip>
        <Chip color="success" variant="primary">
          <CircleFill width={6} />
          <Chip.Label>Active</Chip.Label>
        </Chip>
        <Chip color="warning" variant="primary">
          <CircleFill width={6} />
          <Chip.Label>Pending</Chip.Label>
        </Chip>
        <Chip color="danger" variant="primary">
          <CircleFill width={6} />
          <Chip.Label>Inactive</Chip.Label>
        </Chip>
      </div>

      <div class="flex flex-wrap items-center gap-3">
        <Chip>
          <CircleInfo width={12} />
          <Chip.Label>New Feature</Chip.Label>
        </Chip>
        <Chip color="success">
          <Check width={12} />
          <Chip.Label>Available</Chip.Label>
        </Chip>
        <Chip color="warning">
          <TriangleExclamation width={12} />
          <Chip.Label>Beta</Chip.Label>
        </Chip>
        <Chip color="danger">
          <Ban width={12} />
          <Chip.Label>Deprecated</Chip.Label>
        </Chip>
      </div>
    </div>
  )
}

Styling

Passing Tailwind CSS classes

You can style the root container and individual slots:

import { Chip } from "heroui-solid";

function CustomChip() {
  return (
    <Chip class="rounded-full px-4 py-2 font-bold">
      <Chip.Label class="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.

@layer components {
  .chip {
    @apply rounded-full text-xs;
  }

  .chip__label {
    @apply font-medium;
  }

  .chip--accent {
    @apply border-accent/20;
  }

  .chip--accent .chip__label {
    @apply text-accent;
  }
}

HeroUI 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

Prop	Type	Default	Description
`children`	`JSX.Element`	-	Content to display inside the chip
`class`	`string`	-	Additional CSS classes for the root element
`color`	`"default" \| "accent" \| "success" \| "warning" \| "danger"`	`"default"`	Color variant of the chip
`variant`	`"primary" \| "secondary" \| "tertiary" \| "soft"`	`"secondary"`	Visual style variant
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the chip

Chip.Label Props

Prop	Type	Default	Description
`children`	`JSX.Element`	-	Label text content
`class`	`string`	-	Additional CSS classes for the label slot

Last updated: 7/19/26, 3:27 AM