@furystack/shades-common-components
Version:
Common UI components for FuryStack Shades
57 lines • 1.66 kB
TypeScript
/**
* Props for the PageHeader component.
*/
export type PageHeaderProps = {
/** Optional icon displayed before the title (string or JSX element such as an Icon component) */
icon?: JSX.Element | string;
/** The page title */
title: string;
/** Optional description text displayed below the title */
description?: string;
/** Optional action elements (buttons, etc.) aligned to the right */
actions?: JSX.Element;
};
/**
* PageHeader component for consistent page titles and descriptions.
*
* Provides a standardized header with:
* - Optional icon before the title
* - Main title with primary text styling
* - Optional description with secondary text styling
* - Optional action buttons aligned to the right
*
* @example
* ```tsx
* // Header with an Icon component
* <PageHeader
* icon={<Icon icon={icons.users} />}
* title="Users"
* description="Manage user accounts and their roles."
* />
* ```
*
* @example
* ```tsx
* // Header with action buttons
* <PageHeader
* icon={<Icon icon={icons.folder} />}
* title="Projects"
* description="View and manage your projects."
* actions={
* <Button variant="contained">Create Project</Button>
* }
* />
* ```
*
* @example
* ```tsx
* // Minimal header (title only)
* <PageHeader title="Dashboard" />
* ```
*/
export declare const PageHeader: (props: PageHeaderProps & Omit<Partial<HTMLElement>, "style"> & {
style?: Partial<CSSStyleDeclaration>;
} & {
ref?: import("@furystack/shades").RefObject<Element>;
}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
//# sourceMappingURL=page-header.d.ts.map