@payfit/unity-components
Version:
45 lines (44 loc) • 1.88 kB
TypeScript
import { PropsWithChildren } from 'react';
/**
* PromoDialogActions contains the action buttons for a promo dialog.
* It provides consistent layout and spacing for dialog action buttons.
*
* This component should be used within a `PromoDialog` to display action buttons like
* confirm, cancel, or close actions. The buttons are automatically arranged in a row
* on desktop and stacked on mobile.
* @param props - The props for the PromoDialogActions component
* @param props.children - The action buttons (typically DialogButton components)
* @example
* ```tsx
* import { PromoDialog, PromoDialogHero, DialogTitle, PromoDialogContent, PromoDialogActions, DialogButton } from '@payfit/unity-components'
* import { Illustration } from '@payfit/unity-illustrations'
* import ContractSignature from '@payfit/unity-illustrations/assets/ContractSignature'
*
* function PromoExample() {
* return (
* <PromoDialog>
* <PromoDialogHero>
* <Illustration src={ContractSignature} variant="picture" />
* </PromoDialogHero>
* <DialogTitle>Welcome</DialogTitle>
* <PromoDialogContent>
* <p>Content here...</p>
* </PromoDialogContent>
* <PromoDialogActions>
* <DialogButton variant="close">Skip</DialogButton>
* <DialogButton variant="confirm">Continue</DialogButton>
* </PromoDialogActions>
* </PromoDialog>
* )
* }
* ```
* @remarks
* - Buttons are stacked vertically on mobile (reverse order) and horizontal on desktop
* - Use DialogButton components as children for consistent styling
* - **Accessibility**: Actions are grouped with role="group" for better screen reader navigation
*/
declare const PromoDialogActions: {
({ children }: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
displayName: string;
};
export { PromoDialogActions };