/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ /** * Represents the props of the [Kendo UI for Vue Badge component]({% slug overview_badge %}). */ export interface BadgeProps { /** * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL. */ dir?: string; /** * Specifies the size of the Badge. * * The possible values are: * * `small` * * `medium` * * `large` * * @default `undefined` */ size?: 'small' | 'medium' | 'large'; /** * Specifies the roundness of the Badge. * * The possible values are: * - none * - small * - medium * - large * - full * * @default `undefined` */ rounded?: 'none' | 'small' | 'medium' | 'large' | 'full'; /** * Specifies the appearance fill style of the Badge. * * The possible values are: * * `solid` * * `outline` * * @default `undefined` */ fillMode?: 'solid' | 'outline'; /** * Specifies the theme color of the Badge. * * The possible values are: * * `primary`—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. * * `inverse`— Applies coloring based on inverse theme color. * * @default `undefined` */ themeColor?: 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'inverse' | 'inherit'; /** * 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. * * `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. * */ align?: { /** * Defines the possible horizontal alignment of the Badge. * * The available values are: * - `start`—Uses the start point of the parent element. * - `end`(Default)—Uses the end point of the parent element. */ horizontal: 'start' | 'end'; /** * Defines the possible vertical alignment of the Badge. * * The available values are: * - `top`(Default)—Uses the top point of the parent element. * - `bottom`—Uses the bottom point of the parent element. */ vertical: 'top' | 'bottom'; }; /** * 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. * * @default `edge` */ position?: 'edge' | 'outside' | 'inside' | string; /** * Specifies wether or not to render additional "cutout" border around the Badge. * * The possible values are: * * `true` * * `false` (Default) * */ cutoutBorder?: boolean; } /** * Represents the props of the [Kendo UI for Vue Badge component]({% slug overview_badge %}). */ export interface BadgeContainerProps extends BadgeProps { /** * Defines the custom rendering of the Badge content. Accepts a slot name, a `render` function, or a Vue Component. */ content?: any; } /** * Specifies the theme color of the Badge. * * The possible values are: * * `base` (Default)—Applies base coloring. * * `primary`—Applies coloring based on primary theme color. * * `secondary`—Applies coloring based on secondary theme color. * * `tertiary`— Applies coloring based on tertiary theme color. * * `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. * */ export type BadgeThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error'; /** * Specifies the size of the Badge. * * The possible values are: * * `small` * * `medium` (Default) * * `large` * */ export type BadgeSize = 'small' | 'medium' | 'large'; /** * Specifies the horizontal and vertical alignment of the Badge in a relation to the element. */ export interface BadgeAlign { /** * Defines the possible horizontal alignment of the Badge. * * The available values are: * - `start`—Uses the start point of the parent element. * - `end`(Default)—Uses the end point of the parent element. */ horizontal: 'start' | 'end'; /** * Defines the possible vertical alignment of the Badge. * * The available values are: * - `top`(Default)—Uses the top point of the parent element. * - `bottom`—Uses the bottom point of the parent element. */ vertical: 'top' | 'bottom'; } /** * Specifies the appearance fill style of the Badge. * * The possible values are: * * `solid` (Default) * * `outline` * */ export type BadgeFill = 'solid' | 'outline'; /** * 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. * */ export type BadgePosition = 'edge' | 'outside' | 'inside';