Skip to main content

Dismissible Alert

Dismissible Alert is a reusable alert component built on MUI's Alert. It displays a short message with configurable severity (error, info, success, or warning) and gives users clear feedback for actions like form submission, validation errors, or status updates.

Use it when you need to show temporary, non-blocking messages that can be closed by the user or automatically after a timeout. By default, the alert shows a close button and auto-dismisses after 5 seconds; both behaviors can be turned off or customized. The component uses MUI theming and typography, so it fits naturally into existing MUI-based apps and supports the className prop for extra styling.

Import​

import { DismissibleAlert } from '@js-smart/react-kit';

Basic usage​

<DismissibleAlert message="Your changes have been saved." severity="success" />

Severity variants​

Use the severity prop to style the alert:

<DismissibleAlert message="Something went wrong." severity="error" />
<DismissibleAlert message="Here is some information." severity="info" />
<DismissibleAlert message="Operation completed successfully." severity="success" />
<DismissibleAlert message="Please review before continuing." severity="warning" />

Without auto-dismiss​

To keep the alert visible until the user closes it, set dismissOnTimeOut to false:

<DismissibleAlert message="This alert stays until you close it." severity="info" dismissOnTimeOut={false} />

Custom timeout​

Change how long the alert stays visible before auto-dismissing (in milliseconds):

<DismissibleAlert message="This will disappear in 3 seconds." severity="success" dismissTimeOut={3000} />

Non-dismissible alert​

Hide the close button but still allow auto-dismiss:

<DismissibleAlert message="Informational message without close button." severity="info" dismissible={false} dismissOnTimeOut={false} />

Accessibility​

Provide a custom ariaLabel when the default label is not descriptive enough for screen readers:

<DismissibleAlert message="Session expired. Please log in again." severity="warning" ariaLabel="Session expired warning" />

Peer dependencies​

DismissibleAlert uses MUI's Alert, IconButton, and Close icon. Ensure your project has @mui/material and @mui/icons-material installed (see Installation).

Props​

PropTypeDefaultDescription
messagestring—Required. The alert message to display.
severityAlertColor—Required. One of 'error', 'info', 'success', 'warning'.
classNamestring—Optional CSS class name for the alert.
dismissiblebooleantrueWhether to show a close button.
dismissOnTimeOutbooleantrueWhether to auto-dismiss after the timeout.
dismissTimeOutnumber5000Time in milliseconds before auto-dismiss (when dismissOnTimeOut is true).
ariaLabelstring'Dismissible Alert'Accessible label for the alert.