@payfit/unity-components
Version:
42 lines (41 loc) • 1.96 kB
TypeScript
import { ReactNode } from 'react';
export interface EmptyStateContentProps {
/**
* The main title text for the empty state.
*/
title?: ReactNode;
/**
* Additional descriptive text providing context about the empty state.
*/
description?: ReactNode;
}
/**
* EmptyStateContent communicates the reason for the empty state through a title and optional description.
* Use this component to provide clear messaging about why content is absent and guide users on what they can do next.
* The component displays a heading for the primary message and an optional description for additional context. Set the `title` prop to provide the main message, and use the `description` prop to add supportive details, suggestions, or next steps.
* @param {EmptyStateContentProps} props - The component props including optional `title` and `description`.
* @example
* ```tsx
* import { EmptyState, EmptyStateContent } from '@payfit/unity-components'
*
* function SearchResults() {
* return (
* <EmptyState>
* <EmptyStateContent
* title="No results found"
* description="Try adjusting your search or filters to find what you're looking for."
* />
* </EmptyState>
* )
* }
* ```
* @remarks
* - The content is automatically centered and constrained to optimal reading width
* - The component returns null if both title and description are empty
* - Keep titles concise (2-5 words) and descriptions under 2 sentences for best readability
* - Use positive, actionable language to guide users forward
* @see {@link EmptyStateContentProps} for all available props
* @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/empty-state GitHub}
*/
declare const EmptyStateContent: import('react').ForwardRefExoticComponent<EmptyStateContentProps & import('react').RefAttributes<HTMLDivElement>>;
export { EmptyStateContent };