For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/alert.md.
Leaf UI
  • English

      • Alert

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

      Feedback types

      Project saved
      A new version is available
      Update whenever it is convenient.
      basic.tsx
      import { Alert, Space } from '@ifhover/leaf-ui';

export function AlertBasic() {
  return (
    <Space direction="vertical" align="stretch">
      <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"
      />
    </Space>
  );
}

      Neutral alerts

      Present supporting information on a neutral surface with semantic icon colors.

      Access follows your policy
      Read-only by default. Changes require approval.
      Your draft is saved
      You can finish setting up later.
      neutral.tsx
      import { Alert, Space } from '@ifhover/leaf-ui';

import { ShieldCheck } from 'lucide-react';

export function NeutralAlerts() {
  
  return (
    <Space direction="vertical" align="stretch">
      <Alert
        type="success"
        icon={<ShieldCheck size={20} />}
        title={'Access follows your policy'}
        description={'Read-only by default. Changes require approval.'}
      />
      <Alert
        type="info"
        title={'Your draft is saved'}
        description={'You can finish setting up later.'}
        closable
      />
      <Alert
        type="warning"
        title={'Some services need setup'}
        description={'Ask your administrator to connect them before retrying.'}
      />
      <Alert
        type="error"
        title={'Connection failed'}
        description={'Check the connection settings and retry.'}
      />
    </Space>
  );
}

      Alert API

      PropertyTypeDefaultDescription
      titleReactNodeRequiredRequired. Main content
      descriptionReactNode—Additional details
      type'success' | 'info' | 'warning' | 'error''info'Feedback type
      iconReactNode—Icon content.
      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 '@ifhover/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.

      Surfaces and rich content

      The neutral surface keeps the icon color and announcement semantics of type. Override icon or use showIcon={false} to hide it.