Skip to main content

PanelHeaderProps

The PanelHeaderProps object is used to render a panel header.

note

This type is deducted from Spotify's internal usage. It may not be accurate and may change in the future.

type PanelHeaderProps = {
link?: string;
title?: string;
panel: number;
isAdvert?: boolean;
actions?: React.ReactNode;
onClose?: () => void;
preventDefaultClose?: boolean;
onBack?: (event: React.MouseEvent<HTMLButtonElement>) => void;
titleVariant?: Variant;
titleSemanticColor?: SemanticColor;
};

Properties

PropertyTypeDescription
linkstring | undefinedHref for the header link.
Can be either a URI, a path within the app, or a URL for an external link.
titlestring | undefinedTitle of the header.
panelnumberPanel ID. Used to toggle panel open/closed state.
isAdvertboolean | undefinedWhether or not the panel contains advertisements. Defaults to false
actionsReact.ReactNode | undefinedActions to render in the header.
onClose() => void | undefinedFunction to call when clicking on the close button.
Called before the panel is closed.
preventDefaultCloseboolean | undefinedPrevent the panel from closing when clicking on the header close button. Defaults to false
onBack(event: React.MouseEvent<HTMLButtonElement>) => void | undefinedFunction to call when clicking on the header back button.
If not provided, the back button will not be rendered.
titleVariantVariant | undefinedFont variant for the header title. Defaults to "balladBold"
titleSemanticColorSemanticColor | undefinedSemantic color name for the header title. Defaults to "textBase"