Components
    • Animation
    • Buttons
    • Charts
    • Common Utilities
    • Conversational UI
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Grid
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • Sortable
    • Tooltip
    • TreeList
    • TreeView
    • Upload
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Changelog

BadgeProps

Represents the props of the KendoReact Badge component.

align?

BadgeAlign

Specifies the alignment of the Badge.

The possible keys are:

  • horizontal Defines the possible horizontal alignment of the Badge.
    • startUses the start point of the parent element.
    • end(Default)Uses the end point of the parent element.
  • vertical Defines the possible vertical alignment of the Badge.
    • top(Default)Uses the top point of the parent element.
    • bottomUses the bottom point of the parent element.

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.

fill?

BadgeFill

Specifies the appearance fill style of the Badge.

The possible values are:

  • solid (Default)
  • outline

position?

BadgePosition

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.
  • outsideThe Badge is entirely positioned outside the edge of the container element.
  • insideThe Badge is entirely positioned inside the edge of the the container element.

shape?

BadgeShape

Specifies the shape of the Badge.

The possible values are:

  • circle (Default)Applies circular shape on the Badge.
  • rectangleApplies no border radius on the Badge.
  • roundedApplies default border radius on the Badge.
  • dotApplies dot shape on the Badge.
  • pillApplies border radius equal to half of the height of the Badge.

size?

BadgeSize

Specifies the size of the Badge.

The possible values are:

  • small
  • medium (Default)
  • large

style?

CSSProperties

Sets additional CSS styles to the Badge.

themeColor?

BadgeThemeColor

Specifies the theme color of the Badge.

The possible values are:

  • primary (Default)Applies coloring based on primary theme color.
  • secondaryApplies coloring based on secondary theme color.
  • tertiary Applies coloring based on tertiary theme color.
  • inherit Applies inherited coloring value.
  • infoApplies 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.