Alert

An alert component that provides contextual feedback messages for user actions with support for various styles and dismissibility.

Usage

import { Alert } from '@blendx-ui';

// Basic usage
<Alert variant="success">
  This is a success alert with <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you like.
</Alert>

// Dismissible alert
function DismissibleAlert() {
  const [show, setShow] = useState(true);
  
  if (show) {
    return (
      <Alert variant="danger" onClose={() => setShow(false)} dismissible>
        <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
        <p>
          Change this and that and try again. Or click the X to dismiss.
        </p>
      </Alert>
    );
  }
  return <Button onClick={() => setShow(true)}>Show Alert</Button>;
}

Props

Prop	Type	Required	Default	Description
variant	string	No	'primary'	Style variant ('primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark')
dismissible	boolean	No	false	Whether the Alert can be dismissed
show	boolean	No	true	Controls if the alert is shown
onClose	function	No	-	Callback fired when alert is closed
closeLabel	string	No	'Close alert'	Accessible label for close button
transition	elementType	No	Fade	Transition component used to animate the alert
children	node	No	-	Alert content
className	string	No	-	Additional CSS classes

Parameters

onClose

• Parameters: () - No parameters
• Returns: void

Return Value

Returns an alert component with the following subcomponents:

• Alert.Heading - For adding a heading to the alert
• Alert.Link - For adding links with matching colors to the alert

Examples

Basic Alert with Variants

<>
  <Alert variant="primary">This is a primary alert</Alert>
  <Alert variant="secondary">This is a secondary alert</Alert>
  <Alert variant="success">This is a success alert</Alert>
  <Alert variant="danger">This is a danger alert</Alert>
  <Alert variant="warning">This is a warning alert</Alert>
  <Alert variant="info">This is an info alert</Alert>
  <Alert variant="light">This is a light alert</Alert>
  <Alert variant="dark">This is a dark alert</Alert>
</>

Alert with Heading

<Alert variant="success">
  <Alert.Heading>Hey, nice to see you</Alert.Heading>
  <p>
    This is an alert with a heading that grabs attention and provides additional context.
  </p>
</Alert>

Alert with Link

<Alert variant="info">
  This is an info alert with <Alert.Link href="#">an example link</Alert.Link>.
  Click it to go somewhere.
</Alert>

Dismissible Alert

function DismissibleAlertExample() {
  const [show, setShow] = useState(true);
  
  return (
    <>
      {show ? (
        <Alert variant="warning" onClose={() => setShow(false)} dismissible>
          <Alert.Heading>Warning!</Alert.Heading>
          <p>
            This alert will disappear when you click the close button.
          </p>
        </Alert>
      ) : (
        <Button onClick={() => setShow(true)}>Show Alert</Button>
      )}
    </>
  );
}

Additional Content

<Alert variant="success">
  <Alert.Heading>Well done!</Alert.Heading>
  <p>
    This is a success alert with a lot of extra content.
    It has multiple paragraphs and can contain various elements.
  </p>
  <hr />
  <p className="mb-0">
    Whenever you need to, be sure to use alerts to keep users informed.
  </p>
</Alert>

Accessibility

• Includes appropriate ARIA roles
• Dismissible alerts include screen reader accessible close buttons
• Color contrasts meet accessibility standards
• Focus management for dismissible alerts
• Alert variations use semantic colors to convey meaning

Best Practices

• Use the appropriate variant for the type of message
• Keep alert messages concise and clear
• Use dismissible alerts for non-critical information
• Use Alert.Heading for better visual hierarchy
• Consider screen reader users when including icons or complex content
• For critical errors or warnings, use strong visual indicators
• Don't rely solely on color to convey meaning

Related Components

• Modal
• Toast
• StatusAlert
• PageBanner
• ValidationMessage

Notes

• Based on React Bootstrap's Alert component
• All alerts are responsive by default
• When using dismissible alerts, manage state properly to control visibility
• Consider using toasts for less intrusive notifications

Dependencies

Repository	Usage Count
frontend-app-staff-dashboard	1
frontend-app-authn	1
frontend-app-discussions	1
frontend-app-account	2
frontend-app-profile	1

Detailed usage locations:

frontend-app-staff-dashboard

• src/components/AlertToast.jsx

frontend-app-authn

• src/common-components/ThirdPartyAuthAlert.jsx

frontend-app-discussions

• src/discussions/common/EndorsedAlertBanner.jsx

frontend-app-account

• src/account-settings/delete-account/ConfirmationModal.jsx
• src/account-settings/reset-password/ResetPassword.jsx

frontend-app-profile

• src/components/ProfileCardLarge.jsx