New to Telerik UI for Blazor? Start a free 30-day trial

Chip Appearance

You can control the appearance of the Chip by using the following parameters:

FillMode
Rounded
Size
ThemeColor

FillMode

The FillMode affects the presence of a background and borders. You can set it to a member of the Telerik.Blazor.ThemeConstants.Chip.FillMode class:

Class members	Manual declarations
`Solid` default value	`solid`
`Outline`	`outline`

The built-in Fill modes

@* These are all built-in fill modes *@

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.Chip.FillMode)
        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
        | System.Reflection.BindingFlags.FlattenHierarchy)
        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();

    foreach (var field in fields)
    {
        string fillmode = field.GetValue(null).ToString();

        <div style="float:left; margin: 20px;">
            <TelerikChip @bind-Selected="@IsChipSelected"
                 FillMode="@fillmode"
                 Text="Audio">
            </TelerikChip>
        </div>
    }
}

@code {
    private bool IsChipSelected { get; set; }
}

Rounded

The Rounded attribute applies the border-radius CSS rule to the Chip to achieve curving of the edges. You can set it to a member of the Telerik.Blazor.ThemeConstants.Chip.Rounded class:

Class member	Manual declaration
`Small`	`sm`
`Medium`	`md`
`Large`	`lg`

The built-in values of the Rounded attribute

@* The built-in values of the Rounded attribute.  *@

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.Chip.Rounded)
        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
        | System.Reflection.BindingFlags.FlattenHierarchy)
        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();

    foreach (var field in fields)
    {
        string rounded = field.GetValue(null).ToString();

        <div style="float:left; margin: 20px;">
            <TelerikChip @bind-Selected="@IsChipSelected"
                 Rounded="@rounded"
                 Text="Audio">
            </TelerikChip>
        </div>
    }
}

@code {
    private bool IsChipSelected { get; set; }
}

Size

You can increase or decrease the size of the Chip by setting the Size attribute to a member of the Telerik.Blazor.ThemeConstants.Chip.Size class:

Class member	Manual declaration
`Small`	`sm`
`Medium`	`md`
`Large`	`lg`

The built-in sizes

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.Chip.Size)
        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
        | System.Reflection.BindingFlags.FlattenHierarchy)
        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();

    foreach (var field in fields)
    {
        string size = field.GetValue(null).ToString();

        <div style="float:left; margin: 20px;">
            <TelerikChip @bind-Selected="@IsChipSelected"
                 Size="@size"
                 Text="Audio">
            </TelerikChip>
        </div>
    }
}

@code {
    private bool IsChipSelected { get; set; }
}

ThemeColor

The ThemeColor parameter applies a predefined text color and background color. Use a member of the Telerik.Blazor.ThemeConstants.Chip.ThemeColor class:

Class members	Manual declarations
`Base` default value	`base`
`Info`	`info`
`Success`	`success`
`Warning`	`warning`
`Error`	`error`
`None`	`none`

The built-in ThemeColors

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.Chip.ThemeColor)
        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
        | System.Reflection.BindingFlags.FlattenHierarchy)
        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();

    foreach (var field in fields)
    {
        string themeColor = field.GetValue(null).ToString();

        <div style="float:left; margin: 20px;">
            <TelerikChip @bind-Selected="@IsChipSelected"
                 ThemeColor="@themeColor"
                 Text="Audio">
            </TelerikChip>
        </div>
    }
}

@code {
    private bool IsChipSelected { get; set; }
}

ThemeBuilder

To take full control over the appearance of the Telerik UI for Blazor components, you can create your own styles by using ThemeBuilder.

ThemeBuilder is a web application that enables you to create new themes and customize existing ones. Every change that you make is visualized almost instantly. Once you are done styling the UI components, you can export a ZIP file with the styles for your theme and use them in your Blazor app.

Next Steps

Handle Chip events