Interface CommonProps

interface CommonProps {
    actionButtons?: [ActionButtonProps?, ActionButtonProps?, ActionButtonProps?];
    ariaLabel?: string;
    color?: "black" | "white";
    customAttribute?: {
        attribute: string;
        value: string | number;
    };
    customRightContent?: ReactElement<any, string | JSXElementConstructor<any>>;
    dense?: boolean;
    elevation?: 0 | 1 | 2;
    headingRef?: RefObject<null | HTMLDivElement>;
    hideOnScrollDown?: boolean;
    isOnImage?: boolean;
    navigationButtons?: NavigationButtonProps;
    scrimHeight?: number;
    scrollTarget?: HTMLElement;
    sx?: SxProps<Theme>;
    title: string;
    toolBarSx?: SxProps<Theme>;
}

Properties

actionButtons? ariaLabel? color? customAttribute? customRightContent? dense? elevation? headingRef? hideOnScrollDown? isOnImage? navigationButtons? scrimHeight? scrollTarget? sx? title toolBarSx?

Properties

OptionalactionButtons

actionButtons?: [ActionButtonProps?, ActionButtonProps?, ActionButtonProps?]

Action buttons located on the right side of the AppBar.

OptionalariaLabel

ariaLabel?: string

Aria-label for the AppBar's <nav> element. It helps screen reader users understand the purpose of this navigation section, especially when multiple <nav> elements are present on a page.

Optionalcolor

color?: "black" | "white"

Configure the title and icons to appear in either white or black.

OptionalcustomAttribute

customAttribute?: {
    attribute: string;
    value: string | number;
}

Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

OptionalcustomRightContent

customRightContent?: ReactElement<any, string | JSXElementConstructor<any>>

Custom content on the right side of the AppBar.

Optionaldense

dense?: boolean

Make App Bar height 56 instead of 72. Dense is true by default on breakpoints below sm.

Optionalelevation

elevation?: 0 | 1 | 2

Elevation of the AppBar. Used primarily in dark mode to handle modals and layers

OptionalheadingRef

headingRef?: RefObject<null | HTMLDivElement>

Assign a reference to the heading to use it as the scroll target for determining when to display the title within the appbar.

OptionalhideOnScrollDown

hideOnScrollDown?: boolean

Hide App Bar when scrolling down.

OptionalisOnImage

isOnImage?: boolean

Display the AppBar with a gradient overlay and white text to ensure good contrast.

OptionalnavigationButtons

navigationButtons?: NavigationButtonProps

Navigation buttons.

OptionalscrimHeight

scrimHeight?: number

Height of the overlay scrim in pixels. Default is 125px.

OptionalscrollTarget

scrollTarget?: HTMLElement

Specify an element to serve as the scroll target. Expects a DOM node.

Optionalsx

sx?: SxProps<Theme>

The system prop that allows defining system overrides as well as additional CSS styles.

title

title: string

Title for elevated AppBar.

OptionaltoolBarSx

toolBarSx?: SxProps<Theme>

The system prop that allows defining system overrides as well as additional CSS styles for toolbar.

Settings

Member Visibility

On This Page

Properties