Components

Alert

Style Source

A component for displaying critical information or notifications.

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>

Examples

Alert Colors

The alert component offers five Colors: success, info, warning, error, and default:

Deployment Successful

Your application has been successfully deployed.

New Feature Added

A new feature has been added to the project.

High Memory Usage

The application is using a high amount of memory.

Build Failed

The latest build has failed. Please check the logs for details.

New Feature Added

A new feature has been added to the project.

Alert Variants

The alert component is available in three variants: default, outlined, and filled:

Filled

Default

This is a filled Default Alert.

Success

This is a filled Success Alert.

Warning

This is a filled Warning Alert.

Danger

This is a filled Danger Alert.

Info

This is a filled Info Alert.

Outlined

Default

This is a outline default Alert.

Success

This is a outline Success Alert.

Warning

This is a outline Warning Alert.

Danger

This is a outline Danger Alert.

Info

This is a outline Info Alert.

Alert Style Slots

Slot NameTargeted ComponentPurpose
baseAlertApplies styles to the root Alert component.
iconWrapperAlertStyles the wrapper around the alert icon.
titleAlertStyles the alert title.
descriptionAlertStyles the alert description text.
Edit on GitHub

Previous

Accordion

Next

Alert Dialog

On this page