Alert

A component to display a message to the user. Alerts are often used to provide feedback to the user about an action they have taken or to inform them of a system event.

Import

import { Alert } from "@aeonkit/react";

Usage

Info

The default alert style, which is used to provide general information to the user.

Preview
Code

est incididunt do!!

Fugiat eu consectetur eiusmod dolore. Aliquip fugiat qui quis quis voluptate qui. Ex sint qui tempor ut culpa officia dolore in. Lorem officia irure do nulla nostrud aute commodo aliquip sint minim minim cupidatat. Commodo cupidatat esse consequat nostrud sint exercitation id aliquip ipsum.

<Alert variant="info">
  <Alert.Icon />
  <div>
    <Alert.Title>est incididunt do!!</Alert.Title>
    <Alert.Description>
      Fugiat eu consectetur eiusmod dolore. Aliquip fugiat qui quis quis
      voluptate qui. Ex sint qui tempor ut culpa officia dolore in. Lorem
      officia irure do nulla nostrud aute commodo aliquip sint minim minim
      cupidatat. Commodo cupidatat esse consequat nostrud sint exercitation id
      aliquip ipsum.
    </Alert.Description>
  </div>
  <Alert.Close />
</Alert>

Success

The success alert style, which is used to inform the user that an action has been completed successfully.

Preview
Code

est incididunt do!!

<Alert variant="success">
  <Alert.Icon />
  <div>
    <Alert.Title>est incididunt do!!</Alert.Title>
    <Alert.Description>
      Fugiat eu consectetur eiusmod dolore. Aliquip fugiat qui quis quis
      voluptate qui. Ex sint qui tempor ut culpa officia dolore in. Lorem
      officia irure do nulla nostrud aute commodo aliquip sint minim minim
      cupidatat. Commodo cupidatat esse consequat nostrud sint exercitation id
      aliquip ipsum.
    </Alert.Description>
  </div>
  <Alert.Close />
</Alert>

Warning

The warning alert style, which is used to inform the user of a potential issue.

Preview
Code

est incididunt do!!

<Alert variant="warning">
  <Alert.Icon />
  <div>
    <Alert.Title>est incididunt do!!</Alert.Title>
    <Alert.Description>
      Fugiat eu consectetur eiusmod dolore. Aliquip fugiat qui quis quis
      voluptate qui. Ex sint qui tempor ut culpa officia dolore in. Lorem
      officia irure do nulla nostrud aute commodo aliquip sint minim minim
      cupidatat. Commodo cupidatat esse consequat nostrud sint exercitation id
      aliquip ipsum.
    </Alert.Description>
  </div>
  <Alert.Close />
</Alert>

Danger

The danger alert style, which is used to inform the user of a critical issue.

Preview
Code

est incididunt do!!

<Alert variant="danger">
  <Alert.Icon />
  <div>
    <Alert.Title>est incididunt do!!</Alert.Title>
    <Alert.Description>
      Fugiat eu consectetur eiusmod dolore. Aliquip fugiat qui quis quis
      voluptate qui. Ex sint qui tempor ut culpa officia dolore in. Lorem
      officia irure do nulla nostrud aute commodo aliquip sint minim minim
      cupidatat. Commodo cupidatat esse consequat nostrud sint exercitation id
      aliquip ipsum.
    </Alert.Description>
  </div>
  <Alert.Close />
</Alert>

Props

variant?

"info" "success" "warning" "error"

The alert variant.

Default: info

closable?

boolean

Whether the alert can be closed.

Default: false

API Interface: AlertProps

API Interface: AlertCloseProps

API Interface: AlertDescriptionProps

as?

IconType

The icon component to render.

API Interface: AlertIconProps

as?

"h1" "h2" "h3" "h4" "h5" "h6"

The heading element to render.

Default: h3

API Interface: AlertTitleProps