Alert 警告组件 #

import {
  Alert,
  AlertIcon,
  AlertTitle,
  AlertDescription,
} from '@chakra-ui/react'

function Example() {
  return (
    <Alert status="error">
      <AlertIcon />
      <AlertTitle>错误!</AlertTitle>
      <AlertDescription>您的账户余额不足。</AlertDescription>
    </Alert>
  )
}

<Alert status="error">
  <AlertIcon />
  <AlertTitle>错误</AlertTitle>
</Alert>

<Alert status="success">
  <AlertIcon />
  <AlertTitle>成功</AlertTitle>
</Alert>

<Alert status="warning">
  <AlertIcon />
  <AlertTitle>警告</AlertTitle>
</Alert>

<Alert status="info">
  <AlertIcon />
  <AlertTitle>信息</AlertTitle>
</Alert>

<Alert status="success" variant="subtle">
  <AlertIcon />
  <AlertTitle>柔和变体</AlertTitle>
</Alert>

<Alert status="success" variant="solid">
  <AlertIcon />
  <AlertTitle>实心变体</AlertTitle>
</Alert>

<Alert status="success" variant="left-accent">
  <AlertIcon />
  <AlertTitle>左侧强调变体</AlertTitle>
</Alert>

<Alert status="success" variant="top-accent">
  <AlertIcon />
  <AlertTitle>顶部强调变体</AlertTitle>
</Alert>

function ClosableAlert() {
  const [isVisible, setIsVisible] = useState(true)

  if (!isVisible) return null

  return (
    <Alert status="info" variant="subtle">
      <AlertIcon />
      <AlertTitle>提示</AlertTitle>
      <AlertDescription>这是一条重要信息。</AlertDescription>
      <CloseButton
        position="absolute"
        right="8px"
        top="8px"
        onClick={() => setIsVisible(false)}
      />
    </Alert>
  )
}

<Alert status="warning" variant="subtle" flexDirection="column" alignItems="flex-start">
  <HStack>
    <AlertIcon />
    <AlertTitle>存储空间不足</AlertTitle>
  </HStack>
  <AlertDescription mt={2}>
    您的存储空间即将用完，请升级套餐或清理文件。
  </AlertDescription>
  <Button size="sm" colorScheme="yellow" mt={3}>
    升级套餐
  </Button>
</Alert>