components

Alert

Alerts display a short important message in a way that attracts the user's attention without interrupting the user's task. They can be used to provide feedback, warnings, or informational messages.

Import
import { Alert } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

  • +Provide feedback after user actions (success, error).
  • +Display system-level warnings or informational messages.
  • +Show non-blocking notifications that don't interrupt the user's workflow.

When not to use

  • −For blocking confirmations that require user action — use Modal or ConfirmationDialog.
  • −For inline field-level validation errors — use the error prop on form inputs.
  • −For transient notifications that auto-dismiss — Alert is persistent until cleared.

Examples

Code Samples

Types

Alerts come in four semantic types: info, success, warning, and error. Each type has a distinct color and icon.

import { Alert } from "@skedulo/breeze-ui-react";

export default function AlertTypes() {
  return (
    <div className="space-y-3">
      <Alert type="info">This is an informational alert message.</Alert>
      <Alert type="success">This is a success alert message.</Alert>
      <Alert type="warning">This is a warning alert message.</Alert>
      <Alert type="error">This is an error alert message.</Alert>
    </div>
  );
}

With Title

Alerts can include a bold title for additional context above the message body.

import { Alert } from "@skedulo/breeze-ui-react";

export default function AlertWithTitle() {
  return (
    <div className="space-y-3">
      <Alert type="info" title="Information">
        Here are some additional details about this informational message.
      </Alert>
      <Alert type="success" title="Success">
        The operation completed successfully.
      </Alert>
      <Alert type="warning" title="Warning">
        Please review before proceeding.
      </Alert>
      <Alert type="error" title="Error">
        Something went wrong. Please try again.
      </Alert>
    </div>
  );
}

Clearable

A clearable alert includes a dismiss button so the user can close it.

import { Alert } from "@skedulo/breeze-ui-react";

export default function ClearableAlert() {
  return (
    <div className="space-y-3">
      <Alert type="info" title="Dismissable Info" clearable>
        Click the close button to dismiss this alert.
      </Alert>
      <Alert type="success" title="Dismissable Success" clearable>
        This success message can be dismissed.
      </Alert>
    </div>
  );
}

Guidelines

Do

  • ✓Match the alert type to the message severity (info, success, warning, error).
  • ✓Use the title prop for additional context when the message body alone is insufficient.
  • ✓Use clearable for non-critical alerts the user may want to dismiss.
  • ✓Place alerts at the top of the relevant content area, not buried in the middle.
  • ✓Keep alert messages concise and actionable.

Don't

  • ✗Don't stack more than 2-3 alerts at a time — consolidate messages.
  • ✗Don't use alerts for routine information that could be inline text.
  • ✗Don't use error alerts for validation — use form field error states instead.
  • ✗Don't use warning alerts for purely informational content.
  • ✗Don't leave stale success alerts visible indefinitely — use clearable.

API Reference

PropTypeDefaultDescription
type"info" | "success" | "warning" | "error""info"The semantic type of the alert, which controls its color and icon.
titlestring—An optional bold title displayed above the alert message body.
clearablebooleanfalseWhen true, shows a close button that allows the user to dismiss the alert.
childrenReactNode—The body content of the alert message.

Related Components

ModalConfirmationDialogTooltip