@sinchsmb/ui-kit/dist/types/components/Alert/Alert.d.ts

UI kit for SinchSMB frontend

import { ReactNode } from 'react';
import { CommonProps, TestIdProps } from '../../types';
import { AlertAppearance } from './constants';
export interface AlertProps extends CommonProps, TestIdProps {
    /**
     * Visual {@link Alert} appearance.
     *
     * @default {@link AlertAppearance.Info}.
     */
    appearance?: AlertAppearance;
    /**
     * Function that ask {@link Alert} consumer to hide {@link Alert}.
     * For example, can be invoked, when user press Esc key button.
     */
    onDismiss?: () => void;
    children: ReactNode;
}
/**
 * Component that should be used for showing some notification.
 *
 * ```tsx
 * <Alert appearance={AlertAppearance.Info} onDismiss={handleDismiss}>
 *   <AlertTitle>Blandit aliquet</AlertTitle>
 *   <AlertContent>
 *     Lorem ipsum dolor sit amet, consectetur etur adipiscing elit. Fames blandit aliquet.
 *   </AlertContent>
 *   <AlertActions>
 *     <AlertAction onClick={handleFirstActionsClick}>Action 1</AlertAction>
 *     <AlertAction onClick={handleSecondActionsClick}>Action 2</AlertAction>
 *   </AlertActions>
 * </Alert>
 * ```
 *
 * ## Appearance
 *
 * {@link Alert} support 4 appearance, that can be changed by {@link AlertProps.appearance} prop:
 * - {@link AlertAppearance.Info}
 * - {@link AlertAppearance.Success}
 * - {@link AlertAppearance.Warning}
 * - {@link AlertAppearance.Error}
 *
 * ### Info appearance
 *
 * This appearance should be used for some unimportant notification. This is default appearance.
 *
 * <Story id="components-alert--info" />
 *
 * ### Success appearance
 *
 * This appearance should be used for notification about successful finished actions.
 *
 * <Story id="components-alert--success" />
 *
 * ### Warning appearance
 *
 * This appearance should be used for some important notification.
 *
 * <Story id="components-alert--warning" />
 *
 * ### Error appearance
 *
 * This appearance should be used only for showing error messages.
 *
 * <Story id="components-alert--error" />
 *
 * ## Content
 *
 * {@link Alert} should contains only one {@link AlertContent} component inside.
 *
 * Optionally {@link Alert} can contain {@link AlertTitle} component with title of {@link Alert} and
 * {@link AlertActions} component with up to two {@link AlertAction} component with {@link Alert} action
 * buttons.
 *
 * ## Dismiss button
 *
 * If {@link AlertProps.onDismiss} will be given, then dismiss button (cross button at top right angle) will
 * be shown and when a user clicks by this button the {@link AlertProps.onDismiss} method will be invoked.
 */
export declare function Alert(props: AlertProps): JSX.Element;