Alert 警告提示

以不同的类型和样式向用户显示重要消息和通知。

引入

import { Alert } from 'asterui'

示例

基本用法

带图标和文本的简单警告提示。

</>

This is a basic alert

import { Alert } from 'asterui'
import { InformationCircleIcon } from '@aster-ui/icons'

function App() {
  return (
      <Alert>
        <InformationCircleIcon size="lg" className="shrink-0" />
        <span>This is a basic alert</span>
      </Alert>
    )
}

export default App

警告类型

用于信息、成功、警告和错误状态的不同颜色变体。

</>

Info: New software update available

Success: Your purchase has been confirmed

Warning: Invalid email address

Error: Invalid credentials

import { Alert, Space } from 'asterui'
import { InformationCircleIcon, CheckCircleIcon, ExclamationTriangleIcon, XCircleIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Alert type="info">
          <InformationCircleIcon size="lg" className="shrink-0" />
          <span>Info: New software update available</span>
        </Alert>
  
        <Alert type="success">
          <CheckCircleIcon size="lg" className="shrink-0" />
          <span>Success: Your purchase has been confirmed</span>
        </Alert>
  
        <Alert type="warning">
          <ExclamationTriangleIcon size="lg" className="shrink-0" />
          <span>Warning: Invalid email address</span>
        </Alert>
  
        <Alert type="error">
          <XCircleIcon size="lg" className="shrink-0" />
          <span>Error: Invalid credentials</span>
        </Alert>
      </Space>
    )
}

export default App

带操作按钮

带关闭或操作按钮的警告提示。

</>

We use cookies for no reason

Accept

import { Alert, Button } from 'asterui'
import { ExclamationTriangleIcon } from '@aster-ui/icons'

function App() {
  return (
      <Alert type="warning">
        <ExclamationTriangleIcon size="lg" className="shrink-0" />
        <span>We use cookies for no reason</span>
        <div>
          <Button size="sm">Accept</Button>
        </div>
      </Alert>
    )
}

export default App

描边样式

具有描边变体的警告提示，外观更轻。

</>

Info outline alert

Success outline alert

import { Alert, Space } from 'asterui'
import { InformationCircleIcon, CheckCircleIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Alert type="info" outline>
          <InformationCircleIcon size="lg" className="shrink-0" />
          <span>Info outline alert</span>
        </Alert>
  
        <Alert type="success" outline>
          <CheckCircleIcon size="lg" className="shrink-0" />
          <span>Success outline alert</span>
        </Alert>
      </Space>
    )
}

export default App

虚线样式

带虚线边框变体的警告提示。

</>

Warning dash alert

Error dash alert

import { Alert, Space } from 'asterui'
import { ExclamationTriangleIcon, XCircleIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Alert type="warning" dash>
          <ExclamationTriangleIcon size="lg" className="shrink-0" />
          <span>Warning dash alert</span>
        </Alert>
  
        <Alert type="error" dash>
          <XCircleIcon size="lg" className="shrink-0" />
          <span>Error dash alert</span>
        </Alert>
      </Space>
    )
}

export default App

柔和样式

具有柔和背景色的警告提示。

</>

Info soft alert

Success soft alert

import { Alert, Space } from 'asterui'
import { InformationCircleIcon, CheckCircleIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Alert type="info" soft>
          <InformationCircleIcon size="lg" className="shrink-0" />
          <span>Info soft alert</span>
        </Alert>
  
        <Alert type="success" soft>
          <CheckCircleIcon size="lg" className="shrink-0" />
          <span>Success soft alert</span>
        </Alert>
      </Space>
    )
}

export default App

可关闭警告

带关闭按钮和回调的警告提示。

</>

Closable alert with default close button✕

Closable with onClose and afterClose callbacks✕

Closable with custom close icon×

import { Alert, Space, message } from 'asterui'
import { InformationCircleIcon, CheckCircleIcon, ExclamationTriangleIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Alert type="info" closable>
          <InformationCircleIcon size="lg" className="shrink-0" />
          <span>Closable alert with default close button</span>
        </Alert>
  
        <Alert
          type="success"
          closable={{
            onClose: () => message.success('Success alert closed'),
            afterClose: () => message.info('After close callback executed')
          }}
        >
          <CheckCircleIcon size="lg" className="shrink-0" />
          <span>Closable with onClose and afterClose callbacks</span>
        </Alert>
  
        <Alert
          type="warning"
          closable={{
            closeIcon: <span className="text-lg font-bold">×</span>,
            onClose: () => message.warning('Custom close icon clicked')
          }}
        >
          <ExclamationTriangleIcon size="lg" className="shrink-0" />
          <span>Closable with custom close icon</span>
        </Alert>
      </Space>
    )
}

export default App

API

Alert

属性	描述	类型	默认值
children	警告提示内容	ReactNode	-
type	警告类型的颜色变体	'info' | 'success' | 'warning' | 'error'	-
closable	显示关闭按钮	boolean | { onClose?: () => void; closeIcon?: ReactNode; afterClose?: () => void }	false
outline	描边样式	boolean	false
dash	虚线描边样式	boolean	false
soft	柔和样式	boolean	false
vertical	垂直布局	boolean	false
className	额外的 CSS 类名	string	-

无障碍

• 使用 role="alert" 供屏幕阅读器识别
• 颜色不是唯一的指示符 - 图标提供了额外的上下文
• 操作按钮可通过键盘访问