Skip to content
CHOICE · FREE

Chip

Compact labels for tags and filters, removable when you need it.

Compact labels for tags, filters and statuses, removable when you need it.

Why it helps

  • Small and clear
  • Optionally removable
  • Matches the pastel palette

Where it fits

  • Tags
  • Filter badges
  • Selected values
Chip control in a RayCraft page

Example

<Stack Wrap Align="center">
    @foreach (var tag in _tags)
    {
        <Chip OnDelete="@(() => _tags.Remove(tag))">@tag</Chip>
    }
    <Chip Severity="Severity.Success">Success</Chip>
    <Chip Severity="Severity.Error" Variant="Variant.Outlined">Outlined</Chip>
</Stack>

@code {
    private readonly List<string> _tags = ["Blazor", "SASS", ".NET 10"];
}

A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.

Included in RayCraft Free. Working examples are in the GitHub repository (MIT); it holds example and demo code, not the library code.

All controls ยท Documentation