@payfit/unity-components
Version:
56 lines (55 loc) • 1.83 kB
TypeScript
import { PropsWithChildren } from 'react';
type BaseAlertProps = PropsWithChildren;
type DismissableConfig = {
/**
* Whether the alert is dismissable by the user, and should render a close button.
* @default false
*/
isDismissable?: false;
onDismiss?: never;
dismissButtonLabel?: never;
} | {
/**
* Whether the alert is dismissable by the user, and should render a close button.
* @default false
*/
isDismissable: true;
/**
* Callback function to handle the alert's dismissal behavior.
*/
onDismiss: () => void;
/**
* Label for the close button.
*/
dismissButtonLabel: string;
};
type VariantConfig = {
/**
* The alert's variant, which determines its visual style.
* Each variant has a fixed icon:
* - info: InfoFilled
* - warning: WarningFilled
* - success: CheckCircleFilled
* - danger: WarningCircleFilled
* - insight: LightbulbFilamentFilled
*/
variant?: 'info' | 'warning' | 'success' | 'danger' | 'insight';
};
export type AlertProps = BaseAlertProps & DismissableConfig & VariantConfig;
/**
* Alerts display brief messages for the user without interrupting their use of the app.
* They can provide feedback, confirmations, warnings, errors, or educational insights.
* @example
* <Alert variant="info">
* <AlertTitle>Information</AlertTitle>
* <AlertContent>This is an informational message.</AlertContent>
* </Alert>
* @example
* // Insight variant for tips and guidance
* <Alert variant="insight">
* <AlertTitle>Pro Tip</AlertTitle>
* <AlertContent>Use keyboard shortcuts to navigate faster.</AlertContent>
* </Alert>
*/
declare const Alert: import('react').ForwardRefExoticComponent<AlertProps & import('react').RefAttributes<HTMLDivElement>>;
export { Alert };