@payfit/unity-components
Version:
40 lines (39 loc) • 1.87 kB
TypeScript
import { PropsWithChildren } from 'react';
export type EmptyStateActionsProps = PropsWithChildren;
/**
* EmptyStateActions provides an actionable path forward by containing buttons, links, or other interactive elements.
* Use this component to help users resolve the empty state by offering clear next steps or alternative actions.
* The component arranges action elements vertically with consistent spacing. Place buttons or links as children to guide users toward resolving the empty state. This will display them in a centered, stacked layout.
* @param {EmptyStateActionsProps} props - The component children containing action elements.
* @example
* ```tsx
* import { EmptyState, EmptyStateContent, EmptyStateActions, Button } from '@payfit/unity-components'
*
* function NoDocuments() {
* return (
* <EmptyState>
* <EmptyStateContent
* title="No documents yet"
* description="Upload your first document to get started."
* />
* <EmptyStateActions>
* <Button variant="ghost" onPress={handleUpload}>
* Upload document
* </Button>
* </EmptyStateActions>
* </EmptyState>
* )
* }
* ```
* @remarks
* - The component returns null if no children are provided
* - Multiple actions are stacked vertically for clarity
* - Limit to 1-2 primary actions to avoid overwhelming users
* - Use ghost or secondary button variants to maintain visual hierarchy
* @see {@link EmptyStateActionsProps} 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 EmptyStateActions: import('react').ForwardRefExoticComponent<{
children?: import('react').ReactNode | undefined;
} & import('react').RefAttributes<HTMLDivElement>>;
export { EmptyStateActions };