import { Button, message } from 'antd';
import React from 'react';

const info = () => {
  message.info('This is a normal message');
};

const App: React.FC = () => (
  <Button type="primary" onClick={info}>
    Display normal message
  </Button>
);

export default App;

import { Button, message } from 'antd';
import React from 'react';

const success = () => {
  message.success('This is a prompt message for success, and it will disappear in 10 seconds', 10);
};

const App: React.FC = () => <Button onClick={success}>Customized display duration</Button>;

export default App;

import { Button, message } from 'antd';
import React from 'react';

const success = () => {
  message
    .loading('Action in progress..', 2.5)
    .then(() => message.success('Loading finished', 2.5))
    .then(() => message.info('Loading finished is finished', 2.5));
};

const App: React.FC = () => <Button onClick={success}>Display sequential messages</Button>;

export default App;

import { Button, message } from 'antd';
import React from 'react';

const success = () => {
  message.success({
    content: 'This is a prompt message with custom className and style',
    className: 'custom-class',
    style: {
      marginTop: '20vh',
    },
  });
};

const App: React.FC = () => <Button onClick={success}>Customized style</Button>;

export default App;

import { Button, message, Space } from 'antd';
import React from 'react';

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');
};

const App: React.FC = () => (
  <Space>
    <Button onClick={success}>Success</Button>
    <Button onClick={error}>Error</Button>
    <Button onClick={warning}>Warning</Button>
  </Space>
);

export default App;

import { Button, message, Space } from 'antd';
import React from 'react';

const success = () => {
  const hide = message.loading('Action in progress..', 0, () => {
    message.success('loading had closed');
  });
  // Dismiss manually and asynchronously
  setTimeout(hide, 2500);
};

const success2 = () => {
  message.loading('Action in progress..', 3, () => {
    message.success('loading had closed');
  });
};

const App: React.FC = () => (
  <Space>
    <Button onClick={success}>Display a loading indicator</Button>
    <Button onClick={success2}>Display a loading and auto hide</Button>
  </Space>
);

export default App;

import { Button, message } from 'antd';
import React from 'react';

const key = 'updatable';

const openMessage = () => {
  message.loading({ content: 'Loading...', key });
  setTimeout(() => {
    message.success({ content: 'Loaded!', key, duration: 2 });
  }, 1000);
};

const App: React.FC = () => (
  <Button type="primary" onClick={openMessage}>
    Open the message box
  </Button>
);

export default App;

import { Button, message } from 'antd';
import React from 'react';

const Context = React.createContext({ name: 'Default' });

const App: React.FC = () => {
  const [messageApi, contextHolder] = message.useMessage();

  const info = () => {
    messageApi.open({
      type: 'info',
      content: <Context.Consumer>{({ name }) => `Hello, ${name}!`}</Context.Consumer>,
      duration: 1,
    });
  };

  return (
    <Context.Provider value={{ name: 'Ant Design' }}>
      {contextHolder}
      <Button type="primary" onClick={info}>
        Display normal message
      </Button>
    </Context.Provider>
  );
};

export default App;