Alert

New Feature Added

A new feature has been added to the project.

Installation

NPM packages are currently unstable and may cause issues. Use it at your own risk.

npm install @mijn-ui/react-alert

Usage

import { Alert, AlertDescription, AlertTitle } from "@mijn-ui/react-alert";

<Alert>
  <Terminal className="h-4 w-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Alert Variants

Default

This is a default Alert for general information.

Secondary

This is a secondary Alert for additional information.

Success

This is a success Alert for completed actions.

Warning

This is a warning Alert for cautionary messages.

Danger

This is a danger Alert for critical errors or warnings.

Inverse

This is an inverse Alert with inverted styling.

Alert With Actions

Default

This is a default Alert for general information.

Secondary

This is a secondary Alert for additional information.

Success

This is a success Alert for completed actions.

Warning

This is a warning Alert for cautionary messages.

Danger

This is a danger Alert for critical errors or warnings.

Inverse

This is an inverse Alert with inverted styling.

Alert With Title

This is a default Alert for general information.

This is a secondary Alert for additional information.

This is a danger Alert for critical errors or warnings.

This is a success Alert for completed actions.

This is a warning Alert for cautionary messages.

Alert With Title and Icon

This is a default Alert for general information.

This is a secondary Alert for additional information.

This is a danger Alert for critical errors or warnings.

This is a success Alert for completed actions.

This is a warning Alert for cautionary messages.

Alert Dismissable

This is a secondary Alert for additional information.

Alert Style Slots

Slot Name	Targeted Component	Purpose
`base`	`Alert`	Applies styles to the root `Alert` component.
`iconWrapper`	`Alert`	Styles the wrapper around the alert icon.
`title`	`Alert`	Styles the alert title.
`description`	`Alert`	Styles the alert description text.

New Feature Added

Default

Secondary

Success

Warning

Danger

Inverse

Default

Secondary

Success

Warning

Danger

Inverse

This is a default Alert for general information.

This is a secondary Alert for additional information.

This is a danger Alert for critical errors or warnings.

This is a success Alert for completed actions.

This is a warning Alert for cautionary messages.

This is a default Alert for general information.

This is a secondary Alert for additional information.

This is a danger Alert for critical errors or warnings.

This is a success Alert for completed actions.

This is a warning Alert for cautionary messages.

This is a secondary Alert for additional information.

On this page

New Feature Added

Default

Secondary

Success

Warning

Danger

Inverse

Default

Secondary

Success

Warning

Danger

Inverse

This is a default Alert for general information.

This is a secondary Alert for additional information.

This is a danger Alert for critical errors or warnings.

This is a success Alert for completed actions.

This is a warning Alert for cautionary messages.

This is a default Alert for general information.

This is a secondary Alert for additional information.

This is a danger Alert for critical errors or warnings.

This is a success Alert for completed actions.

This is a warning Alert for cautionary messages.

This is a secondary Alert for additional information.