New to Telerik UI for BlazorStart a free 30-day trial

Chip Appearance

Updated on Aug 31, 2026

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

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 membersManual declarations
Solid
default value
solid
Outlineoutline

The built-in Fill modes

Example
View Source
Loading ...

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 memberManual declaration
Smallsm
Mediummd
Largelg

The built-in values of the Rounded attribute

Example
View Source
Loading ...

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 memberManual declaration
Smallsm
Mediummd
Largelg

The built-in sizes

Example
View Source
Loading ...

ThemeColor

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

Class membersManual declarations
Base
default value
base
Infoinfo
Successsuccess
Warningwarning
Errorerror

The built-in ThemeColors

Example
View Source
Loading ...

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

See Also