import React, { useState } from "react";
import { Alert, Button } from "@tencent/tea-component";

export default function AlertCloseExample() {
  const [alertVisible, setAlertVisible] = useState(true);

  return (
    <>
      <Alert defaultVisible style={{ marginTop: 10 }}>
        非受控关闭
      </Alert>
      <Alert
        type="warning"
        visible={alertVisible}
        onClose={() => setAlertVisible(false)}
        extra={
          <Button type="link" onClick={() => setAlertVisible(false)}>
            关闭
          </Button>
        }
      >
        受控关闭
      </Alert>
    </>
  );
}