Lumeo

Chip

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

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

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
Default
Outline
Primary
Destructive
Success
Warning
Small
Default
Large
React
TypeScript
Tailwind
Blazor
C#
All
Active
Paused
Completed

Active: All

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

React
TypeScript
Blazor
🔥Hot
⭐Featured
✅Verified
⚠️Warning

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 — Simpler status indicators without close or click actions
  • Button — Actionable elements when a chip is not the right fit