Alert

Alerts provide immediate feedback to users about their actions or system status.

This is an information alert. 🚀

Usage

import { Alert } from "@newfold/ui-component-library";

<Alert>This is an information alert. 🚀</Alert>

Variants

The Alert provides four different levels, each with a unique icon and color.

Info

This is an information alert with a link.

<Alert variant="info">
    This is an information alert{' '}
    <a href="https://github.com/newfold-labs/npm-ui-component-library">
      with a link
    </a>
    . (default)
</Alert>

Warning

This is a warning alert with a link.

<Alert variant="warning">
    This is a warning alert{' '}
    <a href="https://github.com/newfold-labs/npm-ui-component-library">
      with a link
    </a>
    .
</Alert>

Success

This is a success alert with a link.

<Alert
    role="alert"
    variant="success"
>
    This is a success alert{' '}
    <a href="https://github.com/newfold-labs/npm-ui-component-library">
      with a link
    </a>
    .
</Alert>

Error

This is an error alert with a link.

<Alert
    role="alert"
    variant="error"
>
    This is an error alert{' '}
    <a href="https://github.com/newfold-labs/npm-ui-component-library">
      with a link
    </a>
    .
</Alert>

Props

Attribute	Type	Description	Default
children^*	`node` \|	The content of the alert.	-
as	`span` \| `div` \|	The HTML element to render.	`span`
variant	`info` \| `warning` \| `success` \| `error` \|	The variant of the alert.	`info`
role	`alert` \| `status` \|	-	`alert`
className	`string` \|	-	-

Alert

Usage​

Variants​

Info​

Warning​

Success​

Error​

Props​