Alert

The Alert component is used to convey important information to the user through the use of contextual types, icon and colors.

View Mobile Version

Usage

Alerts provide users with concise, potentially urgent information without being disruptive. Alerts should not be mistaken with the Alert Dialogue component, which are intended to interrupt the user to obtain a response.

Basics

import { Alert } from "@smartacteam/ui/alert";

The Alert component wraps around its content, and stretches to fill its enclosing container.

<Alert.Root className="flex">
  <Alert.Icon>
    <BellIcon className="h-6 w-6"/>
  </Alert.Icon>
  <div className=" flex-row gap-4 py-4 px-4 bg-base-card-lift rounded-lg">
    <Alert.Title>This is an info alert!</Alert.Title>
    <Alert.Description>
      Insert any additional information about the alert
    </Alert.Description>
  </div>
</Alert.Root>

Severity Values

The Alert component accepts four values — info (default), confirmation, warning and error .

Info

The Info Alert is a notification or message displayed to inform the user of important or relevant information. An info Alert contains the BellIcon, by default, but can be swapped to accommodate message context.

The Info Alert can be styled with the following variants:

Primary (default)

  • base-tertiary is assigned as background color
  • base-foreground is assigned to icon
Secondary
  • base-accent is assigned as background color
  • base-accent-foreground is assigned to icon

Success

A Success Alert is a notification used to indicate that an action or process was completed successfully. It is a way to provide positive feedback to the user.

  • Success Alert has base-confirmation assigned as its background color.
  • Success Alert will always contain the CheckIcon — with base-confirmation-foreground color assigned to it.

Warning

A Warning Alert is a notification that serves to inform the user about a potential problem, danger, or issue that may require attention or action. It typically highlights a situation that is not immediately critical but could become problematic if not addressed.

  • Warning Alert has base-warning assigned as its background color.
  • Warning Alert will always contain the TriangleAlertIcon — with base-warning-foreground color assigned to it.

Error

An Error Alert is a notification designed to convey a critical issue that requires immediate attention or action.

  • Error Alert has base-destructive assigned as its background color.
  • Error Alert will always contain the OctagonAlertIcon — with base-destructive-foreground color assigned to it.