You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: "Learn how to customize the appearance of the widget Telerik UI Badge HtmlHelper for {{ site.framework }}."
4
+
description: "Learn how to customize the appearance of the Telerik UI Badge HtmlHelper for {{ site.framework }}."
5
5
slug: appearance_badge_aspnetcore
6
6
position: 2
7
7
---
8
8
9
9
# Badge Appearance
10
10
11
-
The Badge is used to decorate avatars, navigation menus, as well as, customize template content.
11
+
The Badge offers various options that allow you to control its look and feel.
12
+
13
+
For a complete example, refer to the [Appearance Demo of the Badge](https://demos.telerik.com/{{ site.platform }}/badge/appearance).
14
+
15
+
## Options
16
+
17
+
The Badge provides the following methods for styling:
18
+
19
+
-[`Rounded()`](#rounded)—Specifies the border radius of the component.
20
+
-[`ThemeColor()`](#themecolor)—Configures what color will be applied to the component.
21
+
-[`Size()`](#size)—Defines the overall size of the component.
22
+
-[`FillMode()`](#fillmode)—Creates a solid or an outline Badge.
12
23
13
24
## Rounded
14
25
15
-
The `Rounded` property can be configured via the `Rounded` enumeration. The available values are:
26
+
The `Rounded` property can be configured through the `Rounded` enumeration. The available values are:
16
27
17
-
-`Full` (default) — Renders a circle shape badge.
18
-
-`Small` — Renders an badge with small border radius.
19
-
-`Medium` — Renders an badge with meduim border radius.
20
-
-`Large` — Renders an badge with large border radius.
21
-
-`None` — Renders an badge with no border radius (square badge).
28
+
-`Small`—Renders a Badge with a small border radius.
29
+
-`Medium` (default)—Renders a Badge with a medium border radius.
30
+
-`Large`—Renders a Badge with a large border radius.
31
+
-`Full`—Renders a circle shape Badge.
32
+
-`None`—Renders a Badge with no border radius (square Badge).
22
33
23
34
The following example demonstrates the `Rounded` option of the Badge:
24
35
@@ -38,90 +49,88 @@ The following example demonstrates the `Rounded` option of the Badge:
38
49
```
39
50
{% endif %}
40
51
41
-
## Theme Color
52
+
## ThemeColor
42
53
43
-
The Badge you to specify predefined theme colors.
54
+
The `ThemeColor` option controls the color that will be applied to the rendered Badge.
44
55
45
56
The available `ThemeColor` values are:
46
57
47
-
-`Primary` (Default)—Applies coloring based on the primary theme color.
48
-
-`Base` - Applies base theme color.
49
-
-`Secondary` — Applies coloring based on the secondary theme color.
50
-
-`Tertiary` — Applies coloring based on the tertiary theme color.
51
-
-`Inherit` — Applies the inherited coloring value.
52
-
-`Info` — Applies coloring based on the info theme color.
53
-
-`Success` — Applies coloring based on the success theme color.
54
-
-`Warning` — Applies coloring based on the warning theme color.
55
-
-`Error` — Applies coloring based on the error theme color.
56
-
-`Dark` — Applies coloring based on the dark theme color.
57
-
-`Light` — Applies coloring based on the light theme color.
58
-
-`Inverse` — Applies coloring based on the inverted theme color.
58
+
-`Primary`—Applies coloring based on the primary theme color.
59
+
-`Default`—Applies base theme color.
60
+
-`Secondary`—Applies coloring based on the secondary theme color.
61
+
-`Tertiary`—Applies coloring based on the tertiary theme color.
62
+
-`Inherit`—Applies the inherited coloring value.
63
+
-`Info`—Applies coloring based on the info theme color.
64
+
-`Success`—Applies coloring based on the success theme color.
65
+
-`Warning`—Applies coloring based on the warning theme color.
66
+
-`Error`—Applies coloring based on the error theme color.
67
+
-`Dark`—Applies coloring based on the dark theme color.
68
+
-`Light`—Applies coloring based on the light theme color.
69
+
-`Inverted`—Applies coloring based on the inverted theme color.
59
70
60
71
```HtmlHelper
61
72
@(Html.Kendo().Badge()
62
73
.Name("badge")
63
74
.Text("user")
64
-
.ThemeColor(ThemeColor.Primary)
75
+
.ThemeColor(BadgeColor.Primary)
65
76
)
66
77
```
67
78
{% if site.core %}
68
79
```TagHelper
69
80
<kendo-badge name="badge"
70
81
text="user"
71
-
theme-color="ThemeColor.Primary">
82
+
theme-color="BadgeColor.Primary">
72
83
</kendo-badge>
73
84
```
74
85
{% endif %}
75
86
76
87
## Size
77
88
78
-
The Badge allows you to set predefined or custom sizes. The `Size` property can be configured via the `ComponentSize`enumeration. The available values are:
89
+
The `Size` option allows you to set a predefined size for the Badge. The `Size` property can be configured by using the `BadgeSize`enumeration. The available values are:
79
90
80
91
-`Small`
81
92
-`Medium` (Default)
82
93
-`Large`
83
-
-`None`
84
94
85
95
```HtmlHelper
86
96
@(Html.Kendo().Badge()
87
97
.Name("badge")
88
98
.Text("JS")
89
-
.Size(ComponentSize.Large)
99
+
.Size(BadgeSize.Large)
90
100
)
91
101
```
92
102
{% if site.core %}
93
103
```TagHelper
94
104
<kendo-badge name="badge"
95
105
text="JS"
96
-
size="ComponentSize.Large">
106
+
size="BadgeSize.Large">
97
107
</kendo-badge>
98
108
```
99
109
{% endif %}
100
110
101
111
## FillMode
102
112
103
-
The Badge enables you to set styling options and create solid or outline badges by setting the `BadgeFillMode`. The available `BadgeFillMode` values are:
113
+
The `FillMode` specifies how the theme colors are applied to the component. The available options are:
104
114
105
115
-`Solid` (Default)
106
116
-`Outline`
107
-
-`None`
108
117
109
118
```HtmlHelper
110
119
@(Html.Kendo().Badge()
111
120
.Name("badge")
112
121
.Text("JS")
113
-
.FillMode(BadgeFillMode.Outline)
122
+
.FillMode(BadgeFill.Outline)
114
123
)
115
124
```
116
125
{% if site.core %}
117
126
```TagHelper
118
127
<kendo-badge name="badge"
119
128
text="JS"
120
-
fill-mode="BadgeFillMode.Outline">
129
+
fill-mode="BadgeFill.Outline">
121
130
</kendo-badge>
122
131
```
123
132
{% endif %}
124
133
125
134
## See Also
126
135
127
-
*[JavaScript API Reference of the Badge](https://docs.telerik.com/kendo-ui/api/javascript/ui/badge)
0 commit comments