/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as React_2 from 'react';
/**
* Represents the [KendoReact Badge component]({% slug overview_badge %}).
*
* @example
* ```jsx
* const App = () => {
* return (
* 99+
* );
* };
* ReactDOM.render(, document.querySelector('my-app'));
* ```
*/
export declare const Badge: React_2.ForwardRefExoticComponent>;
/**
* Specifies the horizontal and vertical alignment of the Badge in a relation to the element.
*/
export declare 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';
}
/**
* Represents the [KendoReact BadgeContainer component]({% slug overview_badge %}).
*
* @example
* ```jsx
* const App = () => {
* return (
*
*
*
*
*
*
* );
* };
* ReactDOM.render(, document.querySelector('my-app'));
* ```
*/
export declare const BadgeContainer: React_2.ForwardRefExoticComponent>;
/**
* The BadgeContainer ref.
*/
export declare interface BadgeContainerHandle {
/**
* The BadgeContainer element.
*/
element: HTMLSpanElement | null;
/**
* Focus the BadgeContainer.
*/
focus: () => void;
}
/**
* Represents the props of the [KendoReact BadgeContainer component]({% slug overview_badge %}).
*/
export declare interface BadgeContainerProps {
/**
* The React elements that will be rendered inside the BadgeContainer.
*/
children?: React.ReactNode;
/**
* Specifies a list of CSS classes that will be added to the BadgeContainer.
*/
className?: string;
/**
* Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
*/
dir?: string;
/**
* Sets additional CSS styles to the BadgeContainer.
*/
style?: React.CSSProperties;
}
/**
* Specifies the appearance fill style of the Badge.
*
* The possible values are:
* * `solid` (Default)
* * `outline`
*
*/
export declare type BadgeFill = 'solid' | 'outline';
/**
* The Badge ref.
*/
export declare interface BadgeHandle {
/**
* The Badge element.
*/
element: HTMLSpanElement | null;
/**
* Focus the Badge.
*/
focus: () => void;
}
/**
* 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 declare type BadgePosition = 'edge' | 'outside' | 'inside';
/**
* Represents the props of the [KendoReact Badge component]({% slug overview_badge %}).
*/
export declare interface BadgeProps {
/**
* The React elements that will be rendered inside the Badge.
*/
children?: React.ReactNode;
/**
* Specifies a list of CSS classes that will be added to the Badge.
*/
className?: string;
/**
* Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
*/
dir?: string;
/**
* Sets additional CSS styles to the Badge.
*/
style?: React.CSSProperties;
/**
* Specifies the size of the Badge.
*
* The possible values are:
* * `small`
* * `medium` (Default)
* * `large`
* * null—Does not set a size `className`
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large';
/**
* Specifies the roundness of the Badge.
*
* The possible values are:
* - small
* - medium (Default)
* - large
* - full
* - null—Does not set a rounded `className`
*
* @default `medium`
*/
rounded?: null | 'small' | 'medium' | 'large' | 'full';
/**
* Specifies the appearance fill style of the Badge.
*
* The possible values are:
* * `solid` (Default)
* * `outline`
* * null—Does not set a fillMode `className`
*
* @default `solid`
*/
fillMode?: null | 'solid' | 'outline';
/**
* 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`.
*
* @default `primary`
*/
themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | '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.
* * `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.
*/
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.
* - `null` — No horizontal alignment.
*/
horizontal: 'start' | 'end' | null;
/**
* 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.
* - `null` — No horizontal alignment.
*/
vertical: 'top' | 'bottom' | null;
};
/**
* 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.
*
* @default `edge`
*/
position?: 'edge' | 'outside' | 'inside' | null;
/**
* Specifies wether or not to render additional "cutout" border around the Badge.
*
* The possible values are:
* * `true`
* * `false` (Default)
*
*/
cutoutBorder?: boolean;
}
/**
* Specifies the size of the Badge.
*
* The possible values are:
* * `small`
* * `medium` (Default)
* * `large`
*
*/
export declare type BadgeSize = 'small' | 'medium' | 'large';
/**
* 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.
*
*/
export declare type BadgeThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse' | 'inherit';
/**
* Represents the [KendoReact Loader component]({% slug overview_loader %}).
*
* @example
* ```jsx
* const App = () => {
* return (
*
* );
* };
* ReactDOM.render(, document.querySelector('my-app'));
* ```
*/
export declare const Loader: React_2.ForwardRefExoticComponent>;
/**
* The Loader ref.
*/
export declare interface LoaderHandle {
/**
* The Loader element.
*/
element: HTMLSpanElement | null;
/**
* Focus the Loader.
*/
focus: () => void;
}
/**
* Represents the props of the [KendoReact Loader component]({% slug overview_loader %}).
*/
export declare interface LoaderProps {
/**
* Specifies a list of CSS classes that will be added to the Loader.
*/
className?: string;
/**
* Sets additional CSS styles to the Loader.
*/
style?: React.CSSProperties;
/**
* Specifies the size of the Loader.
*
* The possible values are:
* * `small`
* * `medium` (Default)
* * `large`
*
*/
size?: LoaderSize;
/**
* Specifies the theme color of the Loader.
*
* The possible values are:
* * `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.
* * `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.
*/
themeColor?: LoaderThemeColor;
/**
* Specifies the Loader animation type.
*
* The possible values are:
* - `pulsing` (default)
* - `infinite-spinner`
* - `converging-spinner`
*/
type?: LoaderType;
}
/**
* Specifies the size of the Loader
* ([see example]({% slug appearance_loader %}#toc-size)).
*
* The possible values are:
* * `small`
* * `medium` (Default)
* * `large`
*
*/
export declare type LoaderSize = 'small' | 'medium' | 'large';
/**
* Specifies the theme color of the Loader.
* ([see example]({% slug appearance_loader %}#toc-theme-color)).
*
* The possible values are:
* * `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.
* * `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 inverted theme color.
*
*/
export declare type LoaderThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
/**
* Specifies the Loader animation type.
*
* The possible values are:
* - `pulsing` (default)
* - `infinite-spinner`
* - `converging-spinner`
*
*/
export declare type LoaderType = 'pulsing' | 'infinite-spinner' | 'converging-spinner';
/**
* Represents the [KendoReact Skeleton component]({% slug overview_skeleton %}).
*
* @example
* ```jsx
* const App = () => {
* return (
*
* );
* };
* ReactDOM.render(, document.querySelector('my-app'));
* ```
*/
export declare const Skeleton: React_2.ForwardRefExoticComponent>;
/**
* Specifies the animation settings of the Skeleton.
*/
export declare interface SkeletonAnimation {
/**
* Specifies the type of the Skeleton animation. Defaults to `pulse`.
*/
type?: 'wave' | 'pulse';
}
/**
* The Skeleton ref.
*/
export declare interface SkeletonHandle {
/**
* The Skeleton element.
*/
element: HTMLSpanElement | null;
/**
* Focus the Skeleton.
*/
focus: () => void;
}
/**
* Represents the props of the [KendoReact Skeleton component]({% slug overview_skeleton %}).
*/
export declare interface SkeletonProps {
/**
* Specifies a list of CSS classes that will be added to the Skeleton.
*
* @example
* ```jsx
*
* ```
*/
className?: string;
/**
* Sets additional CSS styles to the Skeleton.
*
* @example
* ```jsx
*
* ```
*/
style?: React.CSSProperties;
/**
* Specifies the animation settings of the Skeleton.
*
* The possible keys are:
* * `type`—Defines the type of the Skeleton animation.
* * `wave`—Shows wave animation effect.
* * `pulse`(Default)—Shows pulse animation effect.
*
* To disable the animation, set the property to `false`.
*
* @example
* ```jsx
*
* ```
*/
animation?: boolean | SkeletonAnimation;
/**
* Specifies the shape of the Skeleton.
*
* The possible values are:
* * `circle`—Renders a circular Skeleton.
* * `text`(Default)—Renders a line Skeleton.
* * `rectangle`—Renders a rectangular Skeleton.
*
* @example
* ```jsx
*
* ```
*/
shape?: SkeletonShape;
}
/**
* Specifies the shape of the Skeleton.
*
* The possible values are:
* * `circle`—Renders a circular Skeleton.
* * `text`(Default)—Renders a line Skeleton.
* * `rectangle`—Renders a rectangular Skeleton.
*
*/
export declare type SkeletonShape = 'circle' | 'text' | 'rectangle';
export { }