BlazorUI Demo

Chip and chip set

Standalone compact actions and bindable single or multiple selection.

Actions and removal
Draft Disabled
View code
<BuiStack Orientation="Orientation.Horizontal" Gap="2" Wrap>
    <BuiChip StartIcon="LucideIcons.Tag" Color="Palette.Teal" OnClick="SelectDesign">Design</BuiChip>
    <BuiChip Color="Colors.Warning" OnClose="RemoveDraft">Draft</BuiChip>
    <BuiChip Disabled>Disabled</BuiChip>
</BuiStack>
<BuiText Typo="Typo.Caption">@chipAction</BuiText>

@code {
    private string? chipAction;
    private void SelectDesign() => chipAction = "Design selected";
    private void RemoveDraft() => chipAction = "Draft removed";
}
Bindable selection

Defaults can be inherited by every chip and changed for the selected state.

Selected: Design
View code
<BuiChipSet TValue="string" SelectionMode="SelectionMode.Multiple" @bind-Values="selected" Color="Palette.Teal" SelectColor="Palette.Violet" Variant="Variant.Outlined" SelectVariant="Variant.Filled" ShowCheckmark>
    <BuiChip Value="@("Design")">Design</BuiChip>
    <BuiChip Value="@("Code")">Code</BuiChip>
    <BuiChip Value="@("Review")">Review</BuiChip>
</BuiChipSet>
<BuiText Typo="Typo.Caption">Selected: @string.Join(", ", selected)</BuiText>

@code {
    private IReadOnlyCollection<string> selected = ["Design"];
}