Alert

A component for displaying alert messages with different status levels and optional actions.

This is an alert message

Usage#

import { Alert } from '@backstage/ui';

<Alert status="info" title="This is an informational message" />

API reference#

Prop	Type	Default	Description
status	infosuccesswarningdanger	info
icon	booleanReact.ReactElement	-
loading	boolean	-
title	React.ReactNode	-
description	React.ReactNode	-
customActions	React.ReactNode	-
m	0123456789	-
mx	0123456789	-
my	0123456789	-
mt	0123456789	-
mb	0123456789	-
ml	0123456789	-
mr	0123456789	-
className	string	-	Additional CSS class name for custom styling.
style	CSSProperties	-	Inline CSS styles object.

Examples#

Status Variants#

The Alert component supports four status variants, each with its own color theme.

This is an informational alert with helpful information.

Your changes have been saved successfully.

This action may have unintended consequences.

An error occurred while processing your request.

<Flex direction="column" gap="4">
  <Alert
    status="info"
    icon={true}
    title="This is an informational alert with helpful information."
  />
  <Alert
    status="success"
    icon={true}
    title="Your changes have been saved successfully."
  />
  <Alert
    status="warning"
    icon={true}
    title="This action may have unintended consequences."
  />
  <Alert
    status="danger"
    icon={true}
    title="An error occurred while processing your request."
  />
</Flex>

With Description#

Add a description to provide additional context or details.

New Feature Available

We've added support for custom table columns. Check the documentation to learn more.

Deployment Successful

Your application has been deployed to production. All health checks passed.

Pending Review

Please review the following items before proceeding with the deployment.

Authentication Failed

Unable to verify your credentials. Please check your username and password and try again.

<Flex direction="column" gap="4">
  <Alert
    status="info"
    icon={true}
    title="New Feature Available"
    description="We've added support for custom table columns. Check the documentation to learn more."
  />
  <Alert
    status="success"
    icon={true}
    title="Deployment Successful"
    description="Your application has been deployed to production. All health checks passed."
  />
  <Alert
    status="warning"
    icon={true}
    title="Pending Review"
    description="Please review the following items before proceeding with the deployment."
  />
  <Alert
    status="danger"
    icon={true}
    title="Authentication Failed"
    description="Unable to verify your credentials. Please check your username and password and try again."
  />
</Flex>

With Actions#

Include custom actions like buttons for interactive alerts.

This alert has a dismiss action on the right.

Your changes have been saved. Would you like to continue?

<Flex direction="column" gap="4">
  <Alert
    status="info"
    icon={true}
    title="This alert has a dismiss action on the right."
    customActions={
      <Button size="small" variant="tertiary">
        Dismiss
      </Button>
    }
  />
  <Alert
    status="success"
    icon={true}
    title="Your changes have been saved. Would you like to continue?"
    customActions={
      <ButtonIcon
        size="small"
        variant="tertiary"
        icon={<RiCloseLine />}
        aria-label="Close"
      />
    }
  />
</Flex>

Loading States#

The loading spinner replaces the icon to indicate an ongoing process.

Processing your request...

Saving changes...

Processing your request

This may take a few moments. Please do not close this window.

<Flex direction="column" gap="4">
  <Alert status="info" icon={true} loading title="Processing your request..." />
  <Alert status="success" icon={true} loading title="Saving changes..." />
  <Alert
    status="info"
    icon={true}
    loading
    title="Processing your request"
    description="This may take a few moments. Please do not close this window."
  />
</Flex>

Without Icons#

Disable icons for a simpler appearance.

This is an informational alert without an icon.

Your changes have been saved successfully.

<Flex direction="column" gap="4">
  <Alert
    status="info"
    icon={false}
    title="This is an informational alert without an icon."
  />
  <Alert
    status="success"
    icon={false}
    title="Your changes have been saved successfully."
  />
</Flex>

Custom Icon#

Provide a custom icon element instead of the default status icon.

This alert uses a custom cloud icon instead of the default info icon.

import { RiCloudLine } from '@remixicon/react';

<Alert
  status="info"
  icon={<RiCloudLine />}
  title="This alert uses a custom cloud icon instead of the default info icon."
/>

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

bui-Alert
bui-AlertContentWrapper
bui-AlertContent
bui-AlertTitle
bui-AlertDescription
bui-AlertIcon
bui-AlertSpinner
bui-AlertActions

Changelog#

Version 0.13.0#

Changes

Extended AlertProps, ContainerProps, DialogBodyProps, and FieldLabelProps with native div element props to allow passing attributes like aria-* and data-*. #33095

Version 0.12.0#

Breaking Changes

Breaking Alert no longer accepts a surface prop

The Alert component's background is now driven entirely by its status prop. The surface prop has been removed.
```
- <Alert surface="1" status="info" />
+ <Alert status="info" />
``` [#32711](https://github.com/backstage/backstage/pull/32711)
```

Changes

Added new Alert component with support for status variants (info, success, warning, danger), icons, loading states, and custom actions.

Updated status color tokens for improved contrast and consistency across light and dark themes:
- Added new --bui-bg-info and --bui-fg-info tokens for info status
- Updated --bui-bg-danger, --bui-fg-danger tokens
- Updated --bui-bg-warning, --bui-fg-warning tokens
- Updated --bui-bg-success, --bui-fg-success tokens #32520