Leaf UI
  • English

      • Alert

      Show a result or information that needs attention within a page.

      Feedback types

      Live previewFeedback types
      Project saved
      A new version is available
      Update whenever it is convenient.
      basic.tsx
      import { Alert } from '@sudden3/leaf-ui';
export function AlertBasic() {
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <Alert title="Project saved" type="success" />
      <Alert
        title="A new version is available"
        description="Update whenever it is convenient."
        closable
      />
      <Alert title="Check your settings" type="warning" />
      <Alert
        title="Save failed"
        description="Try again later or contact your team administrator."
        type="error"
      />
    </div>
  );
}

      Alert API

      PropertyTypeDefaultDescription
      titleReactNodeRequiredMain content
      descriptionReactNode—Additional details
      type'success' | 'info' | 'warning' | 'error''info'Feedback type
      showIconbooleantrueShow the feedback icon
      closablebooleanfalseAllow dismissal
      onClose() => void—Called after dismissal

      Types

      Import types when defining reusable component props or assembling options.

      import type { AlertProps, FeedbackType } from '@sudden3/leaf-ui';

      Usage notes

      Success, information, warning and error messages use distinct semantic colors. Supply application text yourself; the close button follows the ConfigProvider language.