ComponentsAlert
Version 0.11.2

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#

PropTypeDefaultDescription
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#