@progress/kendo-react-common/typography/TypographyProps.d.ts

React Common package delivers common utilities that can be used with the KendoReact UI components. KendoReact Common Utilities package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { KendoReactComponentBaseProps } from '../models/kendoReactComponentBaseProps.js';
import { MarginEnum } from './models/margin.js';
/**
 * Represents the props of the [KendoReact Typography component](https://www.telerik.com/kendo-react-ui/components/common/typography).
 */
export interface TypographyProps extends KendoReactComponentBaseProps {
    /**
     * Sets additional CSS styles to the element.
     */
    style?: React.CSSProperties;
    /**
     * Specifies a list of CSS classes that will be added to the element.
     */
    className?: string;
    /**
     * Overrides the font size applied by the theme typography styles
     * [see example](https://www.telerik.com/kendo-react-ui/components/common/typography/appearance#toc-font-size).
     *
     * The possible values are:
     * * `xsmall`
     * * `small`
     * * `medium`
     * * `large`
     * * `xlarge`
     *
     */
    fontSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
    /**
     * Overrides the font weight applied by the theme typography styles
     * [see example](https://www.telerik.com/kendo-react-ui/components/common/typography/appearance#toc-font-weight).
     *
     * The possible values are:
     * * `light`—font-weight: 300
     * * `normal`—font-weight: 400
     * * `bold`—For Default and Bootstrap themes—font-weight: 700. For Material theme—font-weight: 500.
     *
     */
    fontWeight?: 'light' | 'normal' | 'bold';
    /**
     * Specifies the applied margin to the element
     * [see example](https://www.telerik.com/kendo-react-ui/components/common/typography/appearance#toc-margin).
     *
     * The possible values for the Default and Material themes are:
     * * `xsmall` —Applies 4px margin.
     * * `small` —Applies 8px margin.
     * * `medium` —Applies 12px margin.
     * * `large` —Applies 16px margin.
     * * `xlarge` —Applies 24px margin.
     * * `thin` —Applies 2px margin.
     * * `hair` —Applies 1px margin.
     * * `number` —Passing a number will apply a margin of 4 times the passed number in pixels. The minimum number value is 0 and the maximum is 24.
     * * `object` &smdash;Passing an object allows setting the margins for each side.
     *
     * The possible values for the Bootstrap theme are:
     * * `xsmall` —Applies 0.25rem margin.
     * * `small` —Applies 0.5rem margin.
     * * `medium` —Applies 0.75rem margin.
     * * `large` —Applies 1rem margin.
     * * `xlarge` —Applies 1.25rem margin.
     * * `thin` —Applies 0.125rem margin.
     * * `hair` —Applies 0.0625rem margin.
     * * `number` —Passing a number will apply a margin equal to the passed number divided by 4 in rem units.
     * The minimum number value is 0 and the maximum is 24.
     * * `object` &smdash;Passing an object allows setting the margins for each side.
     */
    margin?: MarginEnum | {
        top?: MarginEnum;
        bottom?: MarginEnum;
        left?: MarginEnum;
        right?: MarginEnum;
    };
    /**
     * Specifies the text align
     * [see example](https://www.telerik.com/kendo-react-ui/components/common/typography/appearance#toc-text-alignment).
     *
     * The possible values are:
     * * `left`—Applies text-align: left
     * * `right`—Applies text-align: right
     * * `center`—Applies text-align: center
     * * `justify`—Applies text-align: justify
     *
     */
    textAlign?: 'left' | 'right' | 'center' | 'justify';
    /**
     * Specifies the text transform
     * [see example](https://www.telerik.com/kendo-react-ui/components/common/typography/appearance#toc-text-transformation).
     *
     * The possible values are:
     * * `lowercase`—Applies text-transform: lowercase
     * * `uppercase`—Applies text-transform: uppercase
     * * `capitalize`—Applies text-transform: capitalize
     *
     */
    textTransform?: 'lowercase' | 'uppercase' | 'capitalize';
    /**
     * Specifies the theme color of the Typography
     * [see example](https://www.telerik.com/kendo-react-ui/components/common/typography/appearance#toc-theme-color).
     *
     * The possible values are:
     * * `inherit`—Applies coloring based on the current color.
     * * `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.
     * * `dark`— Applies coloring based on dark theme color.
     * * `light`— Applies coloring based on light theme color.
     * * `inverse`— Applies coloring based on inverse theme color.
     *
     * You can use the `style` property to apply custom color related properties to the element.
     *
     */
    themeColor?: 'inherit' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
    /**
     * Sets a custom property to the element.
     */
    [customProp: string]: any;
}