Alert

Displays a description for the user's attention.

Preview
Code

This is an info alert

This is an success alert

This is an warning alert

This is an error alert

Installation

npm
yarn
pnpm
bun

npm i @melio-ui/alert

If @melio-ui/react is already installed globally, you can skip this step.

Import

Individual
Global

import { AlertContent, AlertRoot, AlertStatusIcon } from '@melio-ui/alert';

AlertRoot: All parts of the alert are included.
AlertStatusIcon: Alert icon changes depending on status.
AlertContent: The content of the alert to be announced by screen readers.

Another way to import

'use client';

import { Alert } from '@melio-ui/alert';

<Alert.Root>
  <Alert.StatusIcon />
  <Alert.Content>Content1</Alert.Content>
</Alert.Root>;

'use client' must be used when rendering on the server side.

API Reference

AlertRoot

All parts of the alert are included.

Prop	Type	Default	Description
status	`TypeAttributes.Status "info" \| "success" \| "warning" \| "error"`	"info"	The status of the alert.

Data attribute	Values
[data-status]	"info" \| "success" \| "warning" \| "error"

AlertStatusIcon

Alert icon changes depending on status.

Prop	Type	Default	Description
info	`React.ReactNode`	<InfoIcon />	displaying an icon for info status.
success	`React.ReactNode`	<SuccessIcon />	displaying an icon for success status.
warning	`React.ReactNode`	<WarningIcon />	displaying an icon for warning status.
error	`React.ReactNode`	<ErrorIcon />	displaying an icon for error status.

AlertContent

The content of the alert to be announced by screen readers.

Data attribute	Values
[data-status]	"info" \| "success" \| "warning" \| "error"

Examples

Set the status value

<Alert.Root status="success">
  <Alert.StatusIcon />
  <Alert.Content>This is an success alert</Alert.Content>
</Alert.Root>

Custom

<Alert.Root>
  <Alert.StatusIcon />
  <Alert.Content>
    <div style={{ marginTop: -2, fontWeight: 'bold', marginBottom: '0.35em' }}>information</div>
    <div>This is an info alert</div>
  </Alert.Content>
</Alert.Root>

Accordion

Avatar