Message

Display global messages as feedback in response to user operations.

When To Use

• To provide feedback such as success, warning, error, etc.
• A message is displayed at the top of the page and will be dismissed automatically
• Can be used as an alternative to Notification when notifications are too heavy

Examples

Basic Usage

import { TxMessage } from "tx-design-ui";

// Simple usage
TxMessage.info("This is an info message");
TxMessage.success("This is a success message");
TxMessage.warning("This is a warning message");
TxMessage.error("This is an error message");

With Description

TxMessage.open({
  type: "success",
  content: "Success!",
  description: "Your operation has been completed successfully.",
});

TxMessage.open({
  type: "error",
  content: "Error Occurred",
  description: "Something went wrong. Please try again later.",
});

Custom Duration

// Auto close after 1 second
TxMessage.info("1 second", 1000);

// Auto close after 5 seconds
TxMessage.info("5 seconds", 5000);

// Don't auto close (set closable to true)
TxMessage.open({
  type: "info",
  content: "Won't auto close",
  duration: 0,
  closable: true,
});

Closable Message

TxMessage.open({
  type: "info",
  content: "This message can be closed manually",
  closable: true,
  duration: 0,
});

Multiple Messages

// Show multiple messages
TxMessage.success("First message");
setTimeout(() => TxMessage.info("Second message"), 300);
setTimeout(() => TxMessage.warning("Third message"), 600);

// Clear all messages
TxMessage.destroy();

With Callback

TxMessage.open({
  type: "success",
  content: "Processing complete!",
  duration: 2000,
  onClose: () => {
    console.log("Message closed");
  },
});

API

TxMessage Methods

• TxMessage.success(content, duration?)
• TxMessage.error(content, duration?)
• TxMessage.warning(content, duration?)
• TxMessage.info(content, duration?)
• TxMessage.open(config)
• TxMessage.destroy()

Config Object

Property	Description	Type	Default
type	Type of message	'success' | 'error' | 'warning' | 'info'	'info'
content	Main content of the message	ReactNode	-
description	Additional description	ReactNode	-
duration	Time before auto-dismiss (ms), 0 = no auto-dismiss	number	3000
closable	Show close button	boolean	false
onClose	Callback when message is closed	function	-

Notes

• Messages appear at the top center of the viewport
• Multiple messages will stack vertically
• Messages have a slide-down animation on appear and slide-up on dismiss
• Use duration: 0 with closable: true for messages that require user action