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" />

    <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.

    Prefix / Suffix

    With the Prefix and Suffix parts of the IgbChip component and their slots, we can add different content before and after the main content of the chip. We provide default select and remove icons but you can customize them using the IgbSelect and Remove slots. You can add additional content before or after the main content, using the Start and End slots.

    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