eQuantic.UIeQuantic.UI
Docs
Playground
GitHub
DocsSurfaces & display
Chip
View source
1 min read
A compact token for a filter, tag or entity. Selectable, removable, or both.
1
using eQuantic.UI.Components;
STATES
Label
unselected
Label
selected
Label
removable
Usage
1
2
3
4
5
6
7
new Chip("Unpaid")
{
Kind = ChipKind.Filter,
Selected = _filter == Filter.Unpaid,
OnPressed = () => SetState(() => _filter = Filter.Unpaid),
OnRemove = () => SetState(() => _filter = Filter.None),
}
API
Prop
Type
Default
Description
Label
string
One or two words.
Kind
ChipKind
Assist
Assist, Filter, Input or Suggestion — the Material chip roles.
Selected
bool
false
Selected chips carry the variant-subtle treatment.
OnPressed
Action?
null
Makes the chip a toggle.
OnRemove
Action?
null
Adds a trailing remove affordance with its own target.
Variant
Variant
Secondary
Semantic colour when selected.
States
State
Rendering
Unselected
Outline
Selected
Variant-subtle fill and border
Pressed
Fill wash
Removable
Trailing × as a separate focus stop
Accessibility
A selectable chip announces "Unpaid, selected"; the remove affordance is a separate action named "Remove Unpaid".
When to use
Filter rows, applied facets, entity tokens inside a field.
Avoid
Chips as primary buttons.
Chip rows longer than about two screens.
NOTEEvery dimension resolves through Sizing.*(SizeVariant) and the token scales — never a literal. Source: src/eQuantic.UI.Components/Chip.cs.