Alert

Displays important alert messages.

Import: import { Alert } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

Basic Usage

Alert components are non-overlay elements in the page that does not disappear automatically.

<Alert title="KubeSphere">
  Kubesphere.io is an upstream project of the KubeSphere container management platform.
</Alert>

1
<Alert title="KubeSphere">
2
  Kubesphere.io is an upstream project of the KubeSphere container management platform.
3
</Alert>
4

More Types

There are 4 types of Alert: success, info, warning, error.

<Group direction="row" grow>
  <Alert title="KubeSphere">
    Kubesphere.io is an upstream project of the KubeSphere container management platform.
  </Alert>
  <Alert title="KubeSphere" type="warning">
    Kubesphere.io is an upstream project of the KubeSphere container management platform.
  </Alert>
  <Alert title="KubeSphere" type="error">
    Kubesphere.io is an upstream project of the KubeSphere container management platform.
  </Alert>
  <Alert title="KubeSphere" type="info">
    Kubesphere.io is an upstream project of the KubeSphere container management platform.
  </Alert>
</Group>

1
<Group direction="row" grow>
2
  <Alert title="KubeSphere">
3
    Kubesphere.io is an upstream project of the KubeSphere container management platform.
4
  </Alert>
5
  <Alert title="KubeSphere" type="warning">
6
    Kubesphere.io is an upstream project of the KubeSphere container management platform.
7
  </Alert>
8
  <Alert title="KubeSphere" type="error">
9
    Kubesphere.io is an upstream project of the KubeSphere container management platform.
10
  </Alert>
11
  <Alert title="KubeSphere" type="info">
12
    Kubesphere.io is an upstream project of the KubeSphere container management platform.
13
  </Alert>
14
</Group>
15

Icon

A relevant icon will make information clearer and more friendly.

<Alert showIcon>
    Kubesphere.io is an upstream project of the KubeSphere container management platform.
  </Alert>

1
<Alert showIcon>
2
    Kubesphere.io is an upstream project of the KubeSphere container management platform.
3
  </Alert>
4

Closable

To show close button.

<Alert title="KubeSphere" type="info" closable>
  Kubesphere.io is an upstream project of the KubeSphere container management platform.
</Alert>

1
<Alert title="KubeSphere" type="info" closable>
2
  Kubesphere.io is an upstream project of the KubeSphere container management platform.
3
</Alert>
4