or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mddata-display.mddata-entry.mdfeedback.mdindex.mdlayout.mdnavigation.mdother-components.md
tile.json

feedback.mddocs/

Feedback Components

User feedback components for alerts, modals, messages, notifications, and loading states. These components provide visual feedback to users about system status, user actions, and important information.

Capabilities

Modal Component

Modal dialog component with support for static methods and various configuration options.

interface ModalProps {
  afterClose?: () => void;
  bodyStyle?: React.CSSProperties;
  cancelButtonProps?: ButtonProps;
  cancelText?: React.ReactNode;
  centered?: boolean;
  children?: React.ReactNode;
  className?: string;
  classNames?: { header?: string; body?: string; footer?: string; mask?: string; wrapper?: string };
  closable?: boolean;
  closeIcon?: boolean | React.ReactNode;
  confirmLoading?: boolean;
  destroyOnClose?: boolean;
  focusTriggerAfterClose?: boolean;
  footer?: React.ReactNode | null;
  forceRender?: boolean;
  getContainer?: string | HTMLElement | (() => HTMLElement) | false;
  keyboard?: boolean;
  mask?: boolean;
  maskClosable?: boolean;
  maskStyle?: React.CSSProperties;
  modalRender?: (node: React.ReactNode) => React.ReactNode;
  okButtonProps?: ButtonProps;
  okText?: React.ReactNode;
  okType?: ButtonType;
  open?: boolean;
  rootClassName?: string;
  style?: React.CSSProperties;
  styles?: { header?: React.CSSProperties; body?: React.CSSProperties; footer?: React.CSSProperties; mask?: React.CSSProperties };
  title?: React.ReactNode;
  width?: string | number;
  wrapClassName?: string;
  zIndex?: number;
  onCancel?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  onOk?: (e: React.MouseEvent<HTMLButtonElement>) => void;
}

interface ModalFuncProps {
  afterClose?: () => void;
  autoFocusButton?: null | "ok" | "cancel";
  bodyStyle?: React.CSSProperties;
  cancelButtonProps?: ButtonProps;
  cancelText?: React.ReactNode;
  centered?: boolean;
  className?: string;
  closable?: boolean;
  closeIcon?: React.ReactNode;
  content?: React.ReactNode;
  footer?: React.ReactNode | ((originNode: React.ReactNode, { OkBtn, CancelBtn }: { OkBtn: React.ComponentType; CancelBtn: React.ComponentType }) => React.ReactNode);
  getContainer?: string | HTMLElement | (() => HTMLElement) | false;
  icon?: React.ReactNode;
  keyboard?: boolean;
  mask?: boolean;
  maskClosable?: boolean;
  maskStyle?: React.CSSProperties;
  okButtonProps?: ButtonProps;
  okText?: React.ReactNode;
  okType?: ButtonType;
  style?: React.CSSProperties;
  title?: React.ReactNode;
  width?: string | number;
  wrapClassName?: string;
  zIndex?: number;
  onCancel?: (close: Function) => void;
  onOk?: (close: Function) => void;
}

interface ModalStaticFunctions {
  info: (props: ConfirmProps) => { destroy: () => void; update: (newConfig: ConfirmProps) => void };
  success: (props: ConfirmProps) => { destroy: () => void; update: (newConfig: ConfirmProps) => void };
  error: (props: ConfirmProps) => { destroy: () => void; update: (newConfig: ConfirmProps) => void };
  warning: (props: ConfirmProps) => { destroy: () => void; update: (newConfig: ConfirmProps) => void };
  confirm: (props: ConfirmProps) => { destroy: () => void; update: (newConfig: ConfirmProps) => void };  
  destroyAll: () => void;
  config: (options: ConfigOptions) => void;
}

declare const Modal: React.FC<ModalProps> & ModalStaticFunctions;

Usage Examples:

import { Modal, Button } from "antd";
import { ExclamationCircleFilled } from "@ant-design/icons";

// Basic modal
const [isModalOpen, setIsModalOpen] = useState(false);

<Modal
  title="Basic Modal"
  open={isModalOpen}
  onOk={() => setIsModalOpen(false)}
  onCancel={() => setIsModalOpen(false)}
>
  <p>Some contents...</p>
  <p>Some contents...</p>
  <p>Some contents...</p>
</Modal>

// Modal with custom footer
<Modal
  title="Title"
  open={isModalOpen}
  footer={[
    <Button key="back" onClick={() => setIsModalOpen(false)}>
      Return
    </Button>,
    <Button key="submit" type="primary" loading={loading} onClick={() => setIsModalOpen(false)}>
      Submit
    </Button>,
  ]}
>
  <p>Some contents...</p>
</Modal>

// Static methods - Confirmation modal
Modal.confirm({
  title: "Do you Want to delete these items?",
  icon: <ExclamationCircleFilled />,
  content: "Some descriptions",
  onOk() {
    console.log("OK");
  },
  onCancel() {
    console.log("Cancel");
  },
});

// Static methods - Info modal
Modal.info({
  title: "This is a notification message",
  content: (
    <div>
      <p>some messages...some messages...</p>
      <p>some messages...some messages...</p>
    </div>
  ),
  onOK() {},
});

// Static methods - Success modal  
Modal.success({
  content: "some messages...some messages...",
});

// Static methods - Error modal
Modal.error({
  title: "This is an error message",
  content: "some messages...some messages...",
});

// Static methods - Warning modal
Modal.warning({
  title: "This is a warning message", 
  content: "some messages...some messages...",
});

Message Component

Global message display component for showing feedback messages at the top of the page.

interface MessageArgsProps {
  content?: React.ReactNode;
  duration?: number;
  icon?: React.ReactNode;
  key?: string | number;
  className?: string;
  style?: React.CSSProperties;
  onClose?: () => void;
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
}

interface MessageInstance {
  info: (content: JointContent, duration?: VoidFunction, onClose?: VoidFunction) => MessageType;
  success: (content: JointContent, duration?: VoidFunction, onClose?: VoidFunction) => MessageType;
  error: (content: JointContent, duration?: VoidFunction, onClose?: VoidFunction) => MessageType;
  warning: (content: JointContent, duration?: VoidFunction, onClose?: VoidFunction) => MessageType;
  loading: (content: JointContent, duration?: VoidFunction, onClose?: VoidFunction) => MessageType;
  open: (config: ArgsProps) => MessageType;
  destroy: (messageKey?: React.Key) => void;
  config: (options: GlobalConfigProps) => void;
  useMessage: () => [MessageInstance, React.ReactElement];
}

declare const message: MessageInstance;

Usage Examples:

import { message, Button } from "antd";

// Basic usage
const info = () => {
  message.info("This is a normal message");
};

const success = () => {
  message.success("This is a success message");
};

const error = () => {
  message.error("This is an error message");
};

const warning = () => {
  message.warning("This is a warning message");
};

// Loading message
const hide = message.loading("Action in progress..", 0);
// Dismiss manually and asynchronously
setTimeout(hide, 2500);

// Custom duration
message.success("This message will disappear in 3 seconds", 3);

// Promise interface
message
  .loading("Action in progress..", 2.5)
  .then(() => message.success("Loading finished", 2.5))
  .then(() => message.info("Loading finished", 2.5));

// Hook usage (when you need context holder)
const App: React.FC = () => {
  const [messageApi, contextHolder] = message.useMessage();

  const info = () => {
    messageApi.info("Hello, Ant Design!");
  };

  return (
    <>
      {contextHolder}
      <Button type="primary" onClick={info}>
        Display normal message
      </Button>
    </>
  );
};

Notification Component

Global notification display component for showing notifications with more complex content.

interface NotificationArgsProps {
  message: React.ReactNode;
  description?: React.ReactNode;
  btn?: React.ReactNode;
  key?: string;
  onClose?: () => void;
  duration?: number | null;
  icon?: React.ReactNode;
  placement?: NotificationPlacement;
  style?: React.CSSProperties;
  className?: string;
  readonly type?: IconType;
  onClick?: () => void;
  closeIcon?: React.ReactNode;
  props?: DivProps;
}

interface NotificationInstance {
  success: (args: ArgsProps) => void;
  error: (args: ArgsProps) => void;  
  info: (args: ArgsProps) => void;
  warning: (args: ArgsProps) => void;
  warn: (args: ArgsProps) => void;
  open: (args: ArgsProps) => void;
  destroy: (key?: string) => void;
  config: (options: GlobalConfigProps) => void;
  useNotification: () => [NotificationInstance, React.ReactElement];
}

declare const notification: NotificationInstance;

Usage Examples:

import { notification, Button, Space } from "antd";
import { RadiusBottomleftOutlined, RadiusBottomrightOutlined, RadiusUpleftOutlined, RadiusUprightOutlined } from "@ant-design/icons";

// Basic notification
const openNotification = () => {
  notification.open({
    message: "Notification Title",
    description:
      "This is the content of the notification. This is the content of the notification. This is the content of the notification.",
    onClick: () => {
      console.log("Notification Clicked!");
    },
  });
};

// Success notification
notification.success({
  message: "Success",
  description: "This is a success message",
});

// Error notification
notification.error({
  message: "Error",
  description: "This is an error message",
});

// Notification with placement
const openNotificationWithIcon = (placement: NotificationPlacement) => {
  notification.info({
    message: `Notification ${placement}`,
    description: "This is the content of the notification.",
    placement,
  });
};

// Notification with duration
notification.open({
  message: "Notification Title",
  description: "I will never close automatically. This is a purposely very very long description that has many many characters and words.",
  duration: 0,
});

// Custom close button
const close = () => {
  console.log(
    "Notification was closed. Either the close button was clicked or duration time elapsed."
  );
};

notification.open({
  message: "Notification Title",
  description:
    "A function will be called when the notification is closed (automatically after the 'duration' time of manually).",
  onClose: close,
});

// Hook usage (when you need context holder)
const App: React.FC = () => {
  const [api, contextHolder] = notification.useNotification();

  const openNotification = () => {
    api.info({
      message: `Notification`,
      description: "Hello, Ant Design!",
      placement: "topLeft",
    });
  };

  return (
    <>
      {contextHolder}
      <Button type="primary" onClick={openNotification}>
        Open the notification box
      </Button>
    </>
  );
};

Alert Component

Alert component for displaying important information and messages to users.

interface AlertProps {
  action?: React.ReactNode;
  afterClose?: () => void;
  banner?: boolean;
  className?: string;
  closable?: boolean;
  closeIcon?: boolean | React.ReactNode;
  closeText?: React.ReactNode;
  description?: React.ReactNode;
  icon?: React.ReactNode;
  message?: React.ReactNode;
  showIcon?: boolean;
  style?: React.CSSProperties;
  type?: "success" | "info" | "warning" | "error";
  onClose?: React.MouseEventHandler<HTMLButtonElement>;
}

declare const Alert: React.FC<AlertProps> & {
  ErrorBoundary: React.ComponentType<AlertErrorBoundaryProps>;
};

Usage Examples:

import { Alert, Space } from "antd";

// Basic alerts
<Space direction="vertical" style={{ width: "100%" }}>
  <Alert message="Success Text" type="success" />
  <Alert message="Info Text" type="info" />
  <Alert message="Warning Text" type="warning" />
  <Alert message="Error Text" type="error" />
</Space>

// Closable alerts
<Space direction="vertical" style={{ width: "100%" }}>
  <Alert message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text" type="warning" closable />
  <Alert
    message="Error Text"
    description="Error Description Error Description Error Description Error Description"
    type="error"
    closable
  />
</Space>

// Alert with description
<Space direction="vertical" style={{ width: "100%" }}>
  <Alert
    message="Success Text"
    description="Success Description Success Description Success Description"
    type="success"
  />
  <Alert
    message="Info Text"
    description="Info Description Info Description Info Description Info Description"
    type="info"
  />
  <Alert
    message="Warning Text"
    description="Warning Description Warning Description Warning Description Warning Description"
    type="warning"
  />
  <Alert
    message="Error Text"
    description="Error Description Error Description Error Description Error Description"
    type="error"
  />
</Space>

// Alert with icon
<Space direction="vertical" style={{ width: "100%" }}>
  <Alert message="Success Tips" type="success" showIcon />
  <Alert message="Informational Notes" type="info" showIcon />
  <Alert message="Warning" type="warning" showIcon />
  <Alert message="Error" type="error" showIcon />
  <Alert
    message="Success Tips"
    description="Detailed description and advice about successful copywriting."
    type="success"
    showIcon
  />
</Space>

// Alert with custom action
<Alert
  message="Success Tips"
  type="success"
  showIcon
  action={
    <Button size="small" type="text">
      UNDO
    </Button>
  }
  closable
/>

// Banner style alert
<Alert message="Warning text" banner />
<Alert
  message="Very long warning text warning text text text text text text text"
  banner
  closable
/>

Progress Component

Progress indicator for showing the completion progress of an operation or task.

interface ProgressProps {
  format?: (percent?: number, successPercent?: number) => React.ReactNode;
  percent?: number;
  showInfo?: boolean;
  status?: "success" | "exception" | "normal" | "active";
  strokeColor?: string | string[] | { from: string; to: string; direction: string };
  strokeLinecap?: "butt" | "square" | "round";
  strokeWidth?: number;
  success?: { percent: number; strokeColor?: string };
  trailColor?: string;
  type?: "line" | "circle" | "dashboard";
  size?: number | [number, number] | "small" | "default";
  steps?: number;
  gapDegree?: number;
  gapPosition?: "top" | "bottom" | "left" | "right";
}

declare const Progress: React.FC<ProgressProps>;

Usage Examples:

import { Progress, Space } from "antd";

// Basic progress
<Space direction="vertical" style={{ width: "100%" }}>
  <Progress percent={30} />
  <Progress percent={50} status="active" />
  <Progress percent={70} status="exception" />
  <Progress percent={100} />
  <Progress percent={50} showInfo={false} />
</Space>

// Circular progress
<Space size="large">
  <Progress type="circle" percent={75} />
  <Progress type="circle" percent={70} status="exception" />
  <Progress type="circle" percent={100} />
</Space>

// Mini circular progress
<Space size="large">
  <Progress type="circle" percent={30} size={80} />
  <Progress type="circle" percent={70} size={80} status="exception" />
  <Progress type="circle" percent={100} size={80} />
</Space>

// Dashboard progress
<Space size="large">
  <Progress type="dashboard" percent={75} />
  <Progress type="dashboard" percent={75} gapDegree={30} />
</Space>

// Progress with gradient
<Progress
  strokeColor={{
    "0%": "#108ee9",
    "100%": "#87d068",
  }}
  percent={99.9}
/>

// Progress with steps
<Progress percent={50} steps={3} />
<Progress percent={30} steps={5} />
<Progress percent={100} steps={5} size="small" strokeColor="#52c41a" />

// Dynamic progress
const [percent, setPercent] = useState(0);

const increase = () => {
  const newPercent = percent + 10;
  if (newPercent > 100) {
    setPercent(100);
  } else {
    setPercent(newPercent);
  }
};

const decline = () => {
  const newPercent = percent - 10;
  if (newPercent < 0) {
    setPercent(0);
  } else {
    setPercent(newPercent);
  }
};

<>
  <Progress percent={percent} />
  <ButtonGroup>
    <Button onClick={decline} icon={<MinusOutlined />} />
    <Button onClick={increase} icon={<PlusOutlined />} />
  </ButtonGroup>
</>

Other Feedback Components

Additional components for providing user feedback and loading states.

// Spin - Loading indicator
interface SpinProps {
  delay?: number;
  indicator?: React.ReactNode;
  size?: "small" | "default" | "large";
  spinning?: boolean;
  style?: React.CSSProperties;
  tip?: React.ReactNode;
  wrapperClassName?: string;
}

declare const Spin: React.FC<SpinProps>;

// Result - Result page display
interface ResultProps {
  extra?: React.ReactNode;
  icon?: React.ReactNode;
  status?: "success" | "error" | "info" | "warning" | "404" | "403" | "500";
  subTitle?: React.ReactNode;
  title?: React.ReactNode;
}

declare const Result: React.FC<ResultProps>;

// Skeleton - Loading skeleton placeholder
interface SkeletonProps {
  active?: boolean;
  avatar?: boolean | SkeletonAvatarProps;
  loading?: boolean;
  paragraph?: boolean | SkeletonParagraphProps;
  round?: boolean;
  title?: boolean | SkeletonTitleProps;
}

declare const Skeleton: React.FC<SkeletonProps> & {
  Avatar: React.FC<SkeletonAvatarProps>;
  Button: React.FC<SkeletonButtonProps>;
  Input: React.FC<SkeletonInputProps>;
  Image: React.FC<SkeletonImageProps>;
  Node: React.FC<SkeletonNodeProps>;
};

// Popconfirm - Popup confirmation
interface PopconfirmProps {
  cancelButtonProps?: ButtonProps;
  cancelText?: React.ReactNode;
  disabled?: boolean;
  icon?: React.ReactNode;
  okButtonProps?: ButtonProps;
  okText?: React.ReactNode;
  okType?: ButtonType;
  showCancel?: boolean;
  title?: React.ReactNode | (() => React.ReactNode);
  description?: React.ReactNode | (() => React.ReactNode);
  onCancel?: (e?: React.MouseEvent<HTMLElement>) => void;
  onConfirm?: (e?: React.MouseEvent<HTMLElement>) => void;
  onOpenChange?: (open: boolean, e?: React.MouseEvent<HTMLElement>) => void;
}

declare const Popconfirm: React.FC<PopconfirmProps>;

// Drawer - Slide-out panel
interface DrawerProps {
  autoFocus?: boolean;
  afterOpenChange?: (open: boolean) => void;
  className?: string;
  classNames?: { mask?: string; content?: string; body?: string; header?: string; footer?: string };
  closable?: boolean;
  closeIcon?: boolean | React.ReactNode;
  destroyOnClose?: boolean;
  extra?: React.ReactNode;
  footer?: React.ReactNode;
  forceRender?: boolean;
  getContainer?: string | HTMLElement | (() => HTMLElement) | false;
  headerStyle?: React.CSSProperties;
  height?: string | number;
  keyboard?: boolean;
  mask?: boolean;
  maskClosable?: boolean;
  maskStyle?: React.CSSProperties;
  placement?: "top" | "right" | "bottom" | "left";
  push?: boolean | { distance: string | number };
  rootClassName?: string;
  rootStyle?: React.CSSProperties;
  size?: "default" | "large";
  style?: React.CSSProperties;
  styles?: { mask?: React.CSSProperties; content?: React.CSSProperties; body?: React.CSSProperties; header?: React.CSSProperties; footer?: React.CSSProperties };
  title?: React.ReactNode;
  open?: boolean;
  width?: string | number;
  zIndex?: number;
  onClose?: (e: React.MouseEvent | React.KeyboardEvent) => void;
}

declare const Drawer: React.FC<DrawerProps>;

### Result Component

Result page component for displaying success, error, or informational states.

```typescript { .api }
interface ResultProps {
  className?: string;
  extra?: React.ReactNode;
  icon?: React.ReactNode;
  status?: "success" | "error" | "info" | "warning" | "404" | "403" | "500";
  style?: React.CSSProperties;
  subTitle?: React.ReactNode;
  title?: React.ReactNode;
}

declare const Result: React.FC<ResultProps>;

Spin Component

Loading spinner component for indicating loading states.

interface SpinProps {
  className?: string;
  delay?: number;
  indicator?: React.ReactNode;
  size?: "small" | "default" | "large";
  spinning?: boolean;
  style?: React.CSSProperties;
  tip?: React.ReactNode;
  wrapperClassName?: string;
}

declare const Spin: React.FC<SpinProps>;