• What is KendoReact
  • Getting Started
  • Unstyled Mode
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chart Wizardnew
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Toolsupdated
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDF Viewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheet
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting
Components / Indicators / API / BadgeProps / 

BadgeProps

Represents the props of the KendoReact Badge component.

NameTypeDefaultDescription

align?

{ horizontal: "null" | "start" | "end"; vertical: "null" | "top" | "bottom"; }

Specifies the alignment of the Badge.

The possible keys are:

  • horizontal— Defines the possible horizontal alignment of the Badge.
    • 'start'—Uses the start point of the parent element.
    • 'end'(Default)—Uses the end point of the parent element.
    • null No horizontal alignment.
  • vertical— Defines the possible vertical alignment of the Badge.
    • 'top'(Default)—Uses the top point of the parent element.
    • 'bottom'—Uses the bottom point of the parent element.
    • null No horizontal alignment.

children?

React.ReactNode

The React elements that will be rendered inside the Badge.

className?

string

Specifies a list of CSS classes that will be added to the Badge.

cutoutBorder?

boolean

Specifies wether or not to render additional "cutout" border around the Badge.

The possible values are:

  • true
  • false (Default)

dir?

string

Represents the dir HTML attribute. This is used to switch from LTR to RTL.

fillMode?

"null" | "solid" | "outline"

solid

Specifies the appearance fill style of the Badge.

The possible values are:

  • solid (Default)
  • outline
  • null—Does not set a fillMode className

position?

"null" | "edge" | "outside" | "inside"

edge

Specifies the position of the Badge relative to the edge of the container element.

The possible values are:

  • 'edge' (Default)—The center of the Badge is positioned on the edge of the container element.
  • 'outside'—The Badge is entirely positioned outside the edge of the container element.
  • 'inside'—The Badge is entirely positioned inside the edge of the the container element.
  • null — No position class is applied.

rounded?

"null" | "small" | "medium" | "large" | "full"

medium

Specifies the roundness of the Badge.

The possible values are:

  • small
  • medium (Default)
  • large
  • full
  • null—Does not set a rounded className

size?

"null" | "small" | "medium" | "large"

medium

Specifies the size of the Badge.

The possible values are:

  • small
  • medium (Default)
  • large
  • null—Does not set a size className

style?

React.CSSProperties

Sets additional CSS styles to the Badge.

themeColor?

"null" | "base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "dark" | "light" | "inverse" | "inherit"

primary

Specifies the theme color of the Badge.

The possible values are:

  • base —Applies coloring based on the base theme color.
  • primary (Default)—Applies coloring based on primary theme color.
  • secondary—Applies coloring based on secondary theme color.
  • tertiary— Applies coloring based on tertiary theme color.
  • inherit— Applies inherited coloring value.
  • info—Applies coloring based on info theme color.
  • success— Applies coloring based on success theme color.
  • warning— Applies coloring based on warning theme color.
  • error— Applies coloring based on error theme color.
  • dark— Applies coloring based on dark theme color.
  • light— Applies coloring based on light theme color.
  • inverse— Applies coloring based on inverse theme color.
  • null—Does not set a themeColor className.

In this article

Not finding the help you need?

Contact Support