Leaf UI
  • English

      • Message

      Provide brief feedback about an operation.

      Messages and updates

      Live previewMessages and updates
      basic.tsx
      import { Button, useMessage } from '@sudden3/leaf-ui';
export function MessageBasic() {
  const { message, contextHolder } = useMessage();
  async function save() {
    const key = message.loading('Saving');
    await new Promise((resolve) => setTimeout(resolve, 1200));
    message.open({
      key,
      type: 'success',
      content: 'Saved successfully',
      duration: 3,
      closable: true,
    });
  }
  return (
    <>
      <div className="leaf-demo-row">
        <Button onClick={save}>Save asynchronously</Button>
        <Button variant="outline" onClick={() => message.info('An information message')}>
          Information
        </Button>
        <Button danger variant="soft" onClick={() => message.error('Failed. Please try again.')}>
          Error
        </Button>
        <Button variant="soft" onClick={() => message.success('Completed successfully')}>
          Success
        </Button>
        <Button variant="outline" onClick={() => message.warning('Please check your input')}>
          Warning
        </Button>
        <Button variant="ghost" onClick={() => message.close()}>
          Clear messages
        </Button>
      </div>
      {contextHolder}
    </>
  );
}

      Multiple messages

      When a message closes, those below it move up smoothly. Content of different heights collapses using its actual space.

      Live previewMultiple messages
      stack.tsx
      import { Button, useMessage } from '@sudden3/leaf-ui';

export function MessageStack() {
  const { message, contextHolder } = useMessage();
  return (
    <>
      <Button
        variant="outline"
        onClick={() => {
          message.close();
          message.open({
            key: 'stack-first',
            content: 'The first message closes after one second',
            duration: 1,
          });
          message.open({
            key: 'stack-second',
            content: 'Following messages move up smoothly',
            duration: 5,
            closable: true,
          });
          message.open({
            key: 'stack-third',
            content:
              'Longer messages collapse using their actual height, without jumping to a new position.',
            type: 'success',
            duration: 7,
            closable: true,
          });
        }}
      >
        Show three messages
      </Button>
      {contextHolder}
    </>
  );
}

      useMessage API

      PropertyTypeDefaultDescription
      messageMessageApi—Call message methods
      contextHolderReactNode—Render inside the desired theme and language region

      MessageApi

      PropertyTypeDefaultDescription
      open(options: MessageOptions) => string—Create or update by key; returns the key
      success / info / warning / error(content: ReactNode, duration?: number) => string—Show feedback of the specified type
      loading(content: ReactNode) => string—Persistent loading message; returns the key
      close(key?: string) => void—Close one message, or all when key is omitted

      MessageOptions

      PropertyTypeDefaultDescription
      keystringGeneratedUse the same key to update a message
      contentReactNodeRequiredMessage content
      type'success' | 'info' | 'warning' | 'error' | 'loading''info'Message type
      durationnumber3Seconds before dismissal; 0 persists, loading defaults to 0
      closablebooleanfalseShow a close button
      onClose() => void—Called once when dismissal starts

      Message API

      PropertyTypeDefaultDescription
      openbooleanRequiredControlled visibility
      contentReactNodeRequiredMessage content
      type'success' | 'info' | 'warning' | 'error' | 'loading''info'Message type
      durationnumber3Duration in seconds; 0 persists, loading defaults to 0
      closablebooleanfalseClose button
      onClose / afterClose() => void—Requests closure / closing animation completed

      Types

      Import types when defining reusable component props or assembling options.

      import type { MessageProps, MessageOptions, MessageApi } from '@sudden3/leaf-ui';

      Usage notes

      Prefer useMessage. Update a loading message with its key to show the result. Timers pause while a message is hovered or focused and resume with the remaining time.

      Message also supports declarative rendering; set open=false after onClose. Place contextHolder inside ConfigProvider so messages follow its theme and language.