Info State

Info state

Provide contextual informations when data is missing.

Need help?
Cras ultricies, elit sit amet cursus consectetur.


import { InfoState } from "@lualtek/react-components";
export default () => {
  return (
      title="Need help?"
          <UI.Button kind="flat">Secondary</UI.Button>

API Reference

export type InfoStateProps = {
   * 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?: IconChipProps["icon"];
   * Set the icon color. Please use the correct color based on the type of the message.
   * Eg. Don't use `green` for negative informations.
   * @default "blue"
  iconColor?: TokensTypes["colors"];
   * 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).
   * @default "column"
  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;