@payfit/unity-components
Version:
42 lines (41 loc) • 2 kB
TypeScript
import { UnityIcon } from '@payfit/unity-icons';
import { VariantProps } from '@payfit/unity-themes';
import { emptyStateIcon } from '../EmptyState.variants.js';
export interface EmptyStateIconProps extends VariantProps<typeof emptyStateIcon> {
/**
* The Unity icon to display.
*/
icon: UnityIcon;
/**
* The visual style of the icon container.
* @default 'neutral'
*/
variant?: 'neutral' | 'success';
}
/**
* EmptyStateIcon provides visual representation for empty states through an icon in a styled container.
* Use this component to reinforce the message of your empty state with appropriate iconography.
* The component displays Unity icons in a circular container with background color based on the variant. Use the `neutral` variant for standard empty states and informational messages, and the `success` variant to celebrate completed tasks or positive outcomes.
* @param {EmptyStateIconProps} props - The component props including the `icon` name and optional `variant`.
* @example
* ```tsx
* import { EmptyState, EmptyStateIcon, EmptyStateContent } from '@payfit/unity-components'
*
* function NoDocuments() {
* return (
* <EmptyState>
* <EmptyStateIcon icon="DocumentOutlined" variant="neutral" />
* <EmptyStateContent title="No documents found" />
* </EmptyState>
* )
* }
* ```
* @remarks
* - The icon is automatically sized to 24px for consistency across empty states
* - The icon has `aria-hidden="true"` as it's decorative and shouldn't be announced by screen readers
* - Choose icons that clearly represent the empty state context
* @see {@link EmptyStateIconProps} 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 EmptyStateIcon: import('react').ForwardRefExoticComponent<EmptyStateIconProps & import('react').RefAttributes<HTMLDivElement>>;
export { EmptyStateIcon };