# Chip

Source: https://lumeo.nativ.sh/components/chip

# Chip

A compact element representing an input, attribute, or action — used for tags, filters, status labels, and selected items in multi-select fields.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Chip />

## When to Use

-   Status tags indicating state such as active, pending, or archived
-   Filter chips that users can toggle to narrow down content
-   Removable labels for selected items in multi-select or tag inputs
-   Category or topic indicators in lists and cards

Preview Code

Variants

Default

Outline

Primary

Destructive

Success

Warning

Preview Code

Sizes

Small

Default

Large

Preview Code

Closable

React

TypeScript

Tailwind

Blazor

C#

Preview Code

Clickable

All

Active

Paused

Completed

Active: All

Preview Code

Variant (interactive)

Switch variant to compare Default, Outline, and Solid styling.

Default Outline Solid

React

TypeScript

Blazor

Preview Code

With Icon

🔥Hot

⭐Featured

✅Verified

⚠️Warning

**Mobile (rc.49).** The close button on closable chips is now a 44×44 px touch target on small screens, meeting the WCAG minimum for touch affordances.

## API Reference

### Chip

Property

Type

Default

Description

Variant

ChipVariant

Default

Default (bg-secondary), Outline (border only), Solid (colored fill).

Color

string?

—

Color key for Solid variant: "primary", "destructive", "success", "warning".

Size

ChipSize

Default

Sm, Default, or Lg.

Closable

bool

false

Show an × button to remove the chip.

OnClose

EventCallback

—

Fired when the × button is clicked.

Clickable

bool

false

Enable hover effects and pointer cursor.

OnClick

EventCallback

—

Fired when the chip is clicked (requires Clickable=true).

Icon

string?

—

Icon or emoji shown before the chip content.

Avatar

string?

—

Image URL for a small rounded avatar shown before the content.

PressEffect

Button.ButtonPressEffect

None

Press feedback when Clickable. Values: None, Scale, Brightness, Ripple.

Disabled

bool

false

Disables click and close interactions and dims the chip.

### ChipGroup

Property

Type

Description

ChildContent

RenderFragment?

Chip components to display in a wrapping flex row.

## Related Components

-   [Badge](/components/badge) — Simpler status indicators without close or click actions
-   [Button](/components/button) — Actionable elements when a chip is not the right fit