@progress/kendo-vue-indicators/badge/BadgeProps.d.ts

TODO

/**
 * @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';