Blazor Chip Overview

Ignite UI for Blazor Chips help people enter information, make selections, filter content, or trigger actions.

Blazor Chip Example

Usage

Before using the IgbChip, you need to register it as follows:

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule));

You will also need to link an additional CSS file to apply the styling to the IgbChip component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

The simplest way to start using the IgbChip is as follows:

<div class="container sample vertical">
    <IgbChip>Chip</IgbChip>
</div>

@code {

    private IgbIcon RegisterIconRef { get; set; }

    protected override void OnInitialized()
    {
    }
}

To display a selectable chip, you can use the Selectable property of the chip.

<IgbChip Selectable="true"></IgbChip>

To display a removable chip, you can use the Removable property of the chip.

<IgbChip Removable="true"></IgbChip>

Examples

Variants

The Ignite UI for Blazor chip supports several pre-defined stylistic variants. You can change the variant by assigning one of the supported values - Primary, Info, Success, Warning, or Danger to the Variant property.

<IgbChip Variant="ChipVariant.Success"></IgbChip>

Disabled

The Ignite UI for Blazor chip can be disabled by using the Disabled property.

Slots

With the exposed component slots, you can add custom content to different parts of the IgbChip. The component provides default select and remove icons, but you can customize them using the select and remove slots. You can also add additional content before or after the main content using the start and end slots.

We recommend using a <span> element when adding simple text, symbols, or emojis, and an <igc-icon> component when adding icons to the remove, select, start, and end slots.

<IgbChip Selectable="true" Removable="true">
    <IgbIcon slot="select" IconName="verified-account" Collection="material"></IgbIcon>
    <IgbIcon slot="start" IconName="brush" Collection="material"></IgbIcon>
    Chip
    <IgbIcon slot="end" IconName="blood" Collection="material"></IgbIcon>
    <IgbIcon slot="remove" IconName="pacifier" Collection="material"></IgbIcon>
</IgbChip>

Size

We allow the user to choose the size of the IgbChip by utilizing the --ig-size CSS variable:

.size-small {
  --ig-size: var(--ig-size-small);
}

.size-medium {
  --ig-size: var(--ig-size-medium);
}

.size-large {
  --ig-size: var(--ig-size-large);
}

Styling

The IgbChip component exposes a base, prefix, suffix CSS parts that can be used to change all of its style properties.

igc-chip::part(base) {
  background: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}

igc-chip::part(suffix) {
  color: var(--ig-gray-400);
}

API References

Additional Resources

• Ignite UI for Blazor Forums
• Ignite UI for Blazor GitHub