Alert

Source

Theme Source

The Alert component in Pearl UI is a versatile and customizable element used to display a short, important message in a way that attracts the user's attention without interrupting the user's task.

Import#

import { Alert } from "pearl-ui";

Usage#

<Alert  title="Alert Title"  description="This is the description of the alert."/>

Alert Variants#

The variant prop allows you to specify the type of the alert. It can be one of the following: success, info, warning, danger.

<Alert  variant="success"  title="Operation Successful"  description="Your changes have been successfully saved."/>
<Alert  variant="info"  title="Note"  description="Your password will expire in 3 days."/>
<Alert  variant="warning"  title="Caution"  description="Your account will be locked after 5 more unsuccessful attempts."/>
<Alert  variant="danger"  title="Uh oh!"  description="Unable to connect to the server. Please check your internet connection."/>

Alert with Close Button#

The withCloseButton prop allows you to display a close button in the alert. The onClose prop allows you to specify a function that will be called when the close button is clicked.

<Alert  withCloseButton  onClose={() => {    console.log("Alert closed");  }}  title="Operation Successful"  description="Your changes have been successfully saved."/>

Alert Composition#

The Alert component can be composed with other props to customize its appearance and behavior.

<Alert  py={4}  spacing="3"  direction="vertical"  atoms={{    stack: {      alignItems: "center",      justifyContent: "center",    },    description: {      textAlign: "center",    },  }}  title="Operation Successful"  description="Your changes have been successfully saved."/>

Example#

Embed not loading? Click here

Accessibility#

Alert has the role of alert.
When the Alert is displayed, it attracts the user's attention without interrupting the user's task.

Alert Component Properties#

Supported Style Properties#

The Alert component is a composition of the Stack component. Therefore, all properties related to the Stack component can be passed to the Alert component, in addition to the properties listed below.

Additional Properties#

Property Name	Required	Data Type	Default	Description
`size`	No	PearlTheme.components.Alert["sizes"]		Determines the size of the alert.
`variant`	No	PearlTheme.components.Alert["variants"]	`"success"`	Determines the variant of the alert.
`icon`	No	React.ReactElement		Custom icon that overrides the default icon in the alert.
`withIcon`	No	boolean	`true`	Boolean flag to indicate if the alert should be displayed with an icon.
`title`	No	string		Title text for the alert.
`description`	No	string		Description text for the alert.
`withCloseButton`	No	boolean	`false`	Boolean flag to indicate if the alert should be displayed with a close button.
`onClose`	No	() => void		Function to be called when the close button is clicked.