@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
68 lines • 2.59 kB
TypeScript
import { ReactNode } from 'react';
import { StackProps, SymbolProps } from '../..';
export declare type InfoStateProps = PropsWithClass<{
/**
* Set the main tagline of the info state. This should be catchy and short
* as much as possible.
*/
title: ReactNode;
/**
* The icon to display. This is used to enforce the message of the info state.
* This is not displayed if `image` is set.
*/
icon?: SymbolProps['source'];
/**
* Set the icon color. Please use the correct color based on the type of the message.
* Eg. Don't use `green` for negative informations.
*/
iconColor?: 'gray' | 'cyan' | 'green' | 'purple' | 'yellow' | 'red' | 'blue';
/**
* An image may be used instead of an icon. The image is centered and scaled.
*/
image?: string;
/**
* Set the direction of the content (column or row).
*/
direction?: StackProps['direction'];
/**
* Pass the suplementary actions to the info state. Even if you can pass
* as many elements as you want, we suggest to add no more than two actions.
*/
actions?: ReactNode;
}>;
export declare const InfoState: import("react").ForwardRefExoticComponent<{
style?: Record<string, any> | undefined;
className?: string | undefined;
} & {
/**
* Set the main tagline of the info state. This should be catchy and short
* as much as possible.
*/
title: ReactNode;
/**
* The icon to display. This is used to enforce the message of the info state.
* This is not displayed if `image` is set.
*/
icon?: import("packages/symbols/dist").SymbolNames | import("react").ReactElement<HTMLOrSVGElement, string | import("react").JSXElementConstructor<any>> | undefined;
/**
* Set the icon color. Please use the correct color based on the type of the message.
* Eg. Don't use `green` for negative informations.
*/
iconColor?: "gray" | "blue" | "cyan" | "green" | "purple" | "red" | "yellow" | undefined;
/**
* An image may be used instead of an icon. The image is centered and scaled.
*/
image?: string | undefined;
/**
* Set the direction of the content (column or row).
*/
direction?: StackProps['direction'];
/**
* Pass the suplementary actions to the info state. Even if you can pass
* as many elements as you want, we suggest to add no more than two actions.
*/
actions?: ReactNode;
} & {
children?: ReactNode;
} & import("react").RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=info-state.d.ts.map