Badge Appearance
The Badge is used to decorate avatars, navigation menus, as well as, customize template content.
Rounded
The Rounded
property can be configured via the Rounded
enumeration. The available values are:
-
Full
(default) — Renders a circle shape badge. -
Small
— Renders an badge with small border radius. -
Medium
— Renders an badge with meduim border radius. -
Large
— Renders an badge with large border radius. -
None
— Renders an badge with no border radius (square badge).
The following example demonstrates the Rounded
option of the Badge:
@(Html.Kendo().Badge()
.Name("badge")
.Text("Custom")
.Rounded(Rounded.Large)
)
<kendo-badge name="badge"
text="Custom"
rounded="Rounded.Large">
</kendo-badge>
Theme Color
The Badge you to specify predefined theme colors.
The available ThemeColor
values are:
-
Primary
(Default)—Applies coloring based on the primary theme color. -
Base
- Applies base theme color. -
Secondary
— Applies coloring based on the secondary theme color. -
Tertiary
— Applies coloring based on the tertiary theme color. -
Inherit
— Applies the inherited coloring value. -
Info
— Applies coloring based on the info theme color. -
Success
— Applies coloring based on the success theme color. -
Warning
— Applies coloring based on the warning theme color. -
Error
— Applies coloring based on the error theme color. -
Dark
— Applies coloring based on the dark theme color. -
Light
— Applies coloring based on the light theme color. -
Inverse
— Applies coloring based on the inverted theme color.
@(Html.Kendo().Badge()
.Name("badge")
.Text("user")
.ThemeColor(ThemeColor.Primary)
)
<kendo-badge name="badge"
text="user"
theme-color="ThemeColor.Primary">
</kendo-badge>
Size
The Badge allows you to set predefined or custom sizes. The Size
property can be configured via the ComponentSize
enumeration. The available values are:
Small
-
Medium
(Default) Large
None
@(Html.Kendo().Badge()
.Name("badge")
.Text("JS")
.Size(ComponentSize.Large)
)
<kendo-badge name="badge"
text="JS"
size="ComponentSize.Large">
</kendo-badge>
FillMode
The Badge enables you to set styling options and create solid or outline badges by setting the BadgeFillMode
. The available BadgeFillMode
values are:
-
Solid
(Default) Outline
None
@(Html.Kendo().Badge()
.Name("badge")
.Text("JS")
.FillMode(BadgeFillMode.Outline)
)
<kendo-badge name="badge"
text="JS"
fill-mode="BadgeFillMode.Outline">
</kendo-badge>