@itwin/itwinui-react/esm/core/NonIdealState/NonIdealState.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
type NonIdealStateProps = {
    /**
     * An svg component, preferably from `@itwin/itwinui-illustrations-react`.
     *
     * @example
     * import { Svg404 } from '@itwin/itwinui-illustrations-react';
     * <NonIdealState svg={<Svg404 />} heading='Not found' />
     */
    svg: React.ReactNode;
    /**
     * Primary heading for the `NonIdealState`
     */
    heading?: React.ReactNode;
    /**
     * Secondary text to explain the error
     * Can include html in order to provide a hyperlink
     *
     * @example
     * <>
     *   Please visit <Anchor href="https://www.bentley.com/help">our support page</Anchor> for help.
     * </>
     */
    description?: React.ReactNode;
    /**
     * Actions to provide the user with a way to recover from the error.
     * Typically should be a primary and secondary button.
     *
     * @example
     * <NonIdealState
     *   actions={
     *     <>
     *       <Button styleType={'high-visibility'}>Retry</Button>
     *       <Button>Contact us</Button>
     *     </>
     *   }
     * />
     */
    actions?: React.ReactNode;
    /**
     *  Allows props to be passed for non-ideal-state-illustration
     */
    illustrationProps?: React.ComponentProps<'div'>;
    /**
     *  Allows props to be passed for non-ideal-state-title
     */
    titleProps?: React.ComponentProps<'div'>;
    /**
     *  Allows props to be passed for non-ideal-state-description
     */
    descriptionProps?: React.ComponentProps<'div'>;
    /**
     *  Allows props to be passed for non-ideal-state-action
     */
    actionsProps?: React.ComponentProps<'div'>;
};
/**
 * A stylized display to communicate common http errors and other non-ideal states.
 * Works well with svgs from `@itwin/itwinui-illustrations-react`.
 *
 * @example
 * <NonIdealState svg={<Svg404 />} heading='Not found' />
 */
export declare const NonIdealState: PolymorphicForwardRefComponent<"div", NonIdealStateProps>;
export {};