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
Online
Primary
Pending
🔥Hot
⭐Featured
✅Verified
⚠️Warning
Disabled clickable
Disabled closable
Disabled solid
Scale
Brightness
Ripple
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
Density falls back to an ancestor DensityScope when unset — see the Density guide.