@progress/kendo-react-layout/appbar/interfaces/AppBarProps.d.ts

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout 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 * as React from 'react';
/**
 * Represents the props of the [KendoReact AppBar component](https://www.telerik.com/kendo-react-ui/components/layout/appbar).
 * Used to display information, actions, branding titles and additional navigation on the current screen.
 */
export interface AppBarProps {
    /**
     * Represents the child elements that are passed to the AppBar.
     *
     * @example
     * ```jsx
     * <AppBar>
     *   <div>Custom Content</div>
     * </AppBar>
     * ```
     */
    children?: any;
    /**
     * Sets additional CSS classes to the AppBar.
     *
     * @example
     * ```jsx
     * <AppBar className="custom-class" />
     * ```
     */
    className?: string;
    /**
     * Sets additional CSS styles to the AppBar.
     *
     * @example
     * ```jsx
     * <AppBar style={{ backgroundColor: 'blue' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Sets the `id` property of the root AppBar element.
     *
     * @example
     * ```jsx
     * <AppBar id="appbar1" />
     * ```
     */
    id?: string;
    /**
     * Specifies the AppBar position ([see example](https://www.telerik.com/kendo-react-ui/components/layout/appbar/positioning#toc-position)).
     *
     * * The possible values are:
     * * 'top' (Default)
     * * 'bottom'
     *
     * @default top
     *
     * @example
     * ```jsx
     * <AppBar position="bottom" />
     * ```
     */
    position?: AppBarPosition;
    /**
     * Specifies the AppBar position mode ([see example](https://www.telerik.com/kendo-react-ui/components/layout/appbar/positioning#toc-position-mode)).
     *
     * * The possible values are:
     * * 'static' (Default)
     * * 'sticky'
     * * 'fixed'
     *
     * @default static
     *
     * @example
     * ```jsx
     * <AppBar positionMode="sticky" />
     * ```
     */
    positionMode?: AppBarPositionMode;
    /**
     * Specifies the AppBar theme color ([see example](https://www.telerik.com/kendo-react-ui/components/layout/appbar/appearance)).
     *
     * * The possible values are:
     * * 'base'
     * * 'primary'
     * * 'secondary'
     * * 'tertiary'
     * * 'inverse'
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```jsx
     * <AppBar themeColor="primary" />
     * ```
     */
    themeColor?: AppBarThemeColor;
}
/**
 * Specifies the AppBar position ([see example](https://www.telerik.com/kendo-react-ui/components/layout/appbar/positioning#toc-position)).
 *
 * * The possible values are:
 * * 'top' (Default)
 * * 'bottom'
 *
 */
export type AppBarPosition = 'top' | 'bottom';
/**
 * Specifies the AppBar position mode ([see example](https://www.telerik.com/kendo-react-ui/components/layout/appbar/positioning#toc-position-mode)).
 *
 * * The possible values are:
 * * 'static' (Default)
 * * 'sticky'
 * * 'fixed'
 */
export type AppBarPositionMode = 'static' | 'sticky' | 'fixed';
/**
 * Specifies the AppBar theme color ([see example](https://www.telerik.com/kendo-react-ui/components/layout/appbar/appearance)).
 *
 * * The possible values are:
 * * `light` (Default)
 * * 'primary'
 * * 'secondary'
 * * 'tertiary'
 * * 'inverse'
 *
 */
export type AppBarThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | 'inverse';