Skip to content
Lenso UI

Chip

Small informational badges for displaying labels, statuses, and categories

Usage

import { Chip } from '@lenso/ui';
"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Chip } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { s } from "../card/display.stylex";
export function ChipBasic() {  return (    <div {...stylex.props(s.wrap3)}>      <Chip>Default</Chip>      <Chip color="accent">Accent</Chip>      <Chip color="success">Success</Chip>      <Chip color="warning">Warning</Chip>      <Chip color="danger">Danger</Chip>    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Anatomy

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

<Chip>  Label text</Chip>

Examples

Variants

"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { CircleDashed } from "@gravity-ui/icons";import { Chip, Separator } from "@lenso/ui";import { Fragment } from "react";import * as stylex from "@stylexjs/stylex";import { s } from "../card/display.stylex";
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 {...stylex.props(s.column8, s.scroll)}>      {sizes.map((size, index) => (        <Fragment key={size}>          <div {...stylex.props(s.column4)}>            <h3 {...stylex.props(s.textSm, s.semibold, s.muted, s.capitalize)}>{size}</h3>            <div {...stylex.props(s.row3)}>              <div {...stylex.props(s.labelCell)} />              {colors.map((color) => (                <div key={color} {...stylex.props(s.matrixCell)}>                  <span {...stylex.props(s.textXs, s.muted, s.capitalize)}>{color}</span>                </div>              ))}            </div>            <div {...stylex.props(s.column3)}>              {variants.map((variant) => (                <div key={variant} {...stylex.props(s.row3)}>                  <div {...stylex.props(s.labelCell, s.textSm, s.muted, s.capitalize)}>                    {variant}                  </div>                  {colors.map((color) => (                    <div key={color} {...stylex.props(s.matrixCell)}>                      <Chip color={color} size={size} variant={variant}>                        <CircleDashed />                        <Chip.Label>Label</Chip.Label>                        <CircleDashed />                      </Chip>                    </div>                  ))}                </div>              ))}            </div>          </div>          {index < sizes.length - 1 && <Separator />}        </Fragment>      ))}    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Statuses

"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Ban, Check, CircleFill, CircleInfo, TriangleExclamation } from "@gravity-ui/icons";import { Chip } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { s } from "../card/display.stylex";
export function ChipStatuses() {  return (    <div {...stylex.props(s.column4)}>      <div {...stylex.props(s.wrap3)}>        <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 {...stylex.props(s.wrap3)}>        <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>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

With Icons

"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { ChevronDown, CircleCheckFill, CircleFill, Clock, Xmark } from "@gravity-ui/icons";import { Chip } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { s } from "../card/display.stylex";
export function ChipWithIcon() {  return (    <div {...stylex.props(s.wrap3)}>      <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>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Customization

Tailwind CSS

"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Chip } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { s } from "../card/display.stylex";
export function CustomStyles() {  return (    <div {...stylex.props(s.wrap2)}>      <Chip xstyle={s.chipDraft}>Draft</Chip>      <Chip xstyle={s.chipReview}>In review</Chip>      <Chip xstyle={s.chipPublished}>Published</Chip>    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Global CSS

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;  }}

Styling Reference

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 [!toc]

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

Color Classes [!toc]

  • .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 [!toc]

  • .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 [!toc]

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

Compound Variant Classes [!toc]

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

PropTypeDefaultDescription
childrenReact.ReactNode-Content to display inside the chip
classNamestring-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

PropTypeDefaultDescription
childrenReact.ReactNode-Label text content
classNamestring-Additional CSS classes for the label slot
Avatar

Display user profile images with customizable fallback content

CloseButton

Button component for closing dialogs, modals, or dismissing content

Separator

Visually divide content sections