Appearance
The Chip provides predefined appearance options such as different sizes, border radiuses, fill modes and theme colors.
For a live example, visit the Appearance Demo of the Chip.
Options
The Telerik WebForms Chip supports the following styling options:
Size
—Configures the overall size of the component.ThemeColor
—Configures what color will be applied to the component.FillMode
—Configures how the color is applied to the component.Rounded
—Configures the border radius of the component.Icon
—Displays an icon.
Size
The size option controls how big or small the rendered chip looks.
The following values are available for the size
option:
Small
Medium
(default)Large
None
- The chip will naturally resize based on the content
Example
<telerik:RadChip runat="server" Size="Small" Label="Small"></telerik:RadChip>
<telerik:RadChip runat="server" Size="Medium" Label="Medium"></telerik:RadChip>
<telerik:RadChip runat="server" Size="Large" Label="Large"></telerik:RadChip>
<telerik:RadChip runat="server" Size="None" Label="None"></telerik:RadChip>
FillMode
The FillMode
option controls the way the color is applied to the rendered div.
The following values are available for the FillMode
option:
Solid
(default)Outline
Example
<telerik:RadChip runat="server" FillMode="Solid" Label="Solid"></telerik:RadChip>
<telerik:RadChip runat="server" FillMode="Outline" Label="Outline"></telerik:RadChip>
ThemeColor
The ThemeColor
option controls the color that will be applied to the rendered Chip.
The following values are available for the ThemeColor
option:
Base
(default)Info
Success
Warning
Error
Example
<telerik:RadChip runat="server" ThemeColor="Base" Label="Base"></telerik:RadChip>
<telerik:RadChip runat="server" ThemeColor="Info" Label="Info"></telerik:RadChip>
<telerik:RadChip runat="server" ThemeColor="Success" Label="Success"></telerik:RadChip>
<telerik:RadChip runat="server" ThemeColor="Warning" Label="Warning"></telerik:RadChip>
<telerik:RadChip runat="server" ThemeColor="Error" Label="Error"></telerik:RadChip>
Rounded
The Rounded
option controls how much border radius is applied to the rendered Chip.
The following values are available for the Rounded
option:
Small
Medium
(default)Large
Full
None
Example
<telerik:RadChip runat="server" Rounded="Small" Label="Small"></telerik:RadChip>
<telerik:RadChip runat="server" Rounded="Medium" Label="Medium"></telerik:RadChip>
<telerik:RadChip runat="server" Rounded="Large" Label="Large"></telerik:RadChip>
<telerik:RadChip runat="server" Rounded="Full" Label="Full"></telerik:RadChip>
<telerik:RadChip runat="server" Rounded="None" Label="None"></telerik:RadChip>
Icon
To enable icons for the chip, set the Icon
property to the name of the embedded icon.
Visit the Web Font Icons - List of Font Icons page and find the icon of your choice then copy its name without the .k-i-
prefix.
For example, if the icon is called .k-i-plus-outline
the name would be plus-outline
.
Example
Code
<telerik:RadChip runat="server" Icon="plus-outline" Label="plus-outline"></telerik:RadChip>
More examples
Code
<telerik:RadChip runat="server" Icon="plus-outline" Label="plus-outline"></telerik:RadChip>
<telerik:RadChip runat="server" Icon="bell" Label="bell"></telerik:RadChip>
<telerik:RadChip runat="server" Icon="youtube" Label="youtube"></telerik:RadChip>
<telerik:RadChip runat="server" Icon="shapes" Label="shapes"></telerik:RadChip>
<telerik:RadChip runat="server" Icon="file-wrench" Label="file-wrench"></telerik:RadChip>
<telerik:RadChip runat="server" Icon="heart-outline" Label="heart-outline"></telerik:RadChip>
<telerik:RadChip runat="server" Icon="clipboard" Label="clipboard"></telerik:RadChip>
<telerik:RadChip runat="server" Icon="anchor" Label="anchor"></telerik:RadChip>
<telerik:RadChip runat="server" Icon="user" Label="user"></telerik:RadChip>