Alert

Alert #

Alert messages are used for user interaction.

import { PAlert } from 'pearkit';

Basic #

Here is an alert component that you can use in your projects.

Lorem Ipsum is simply dummy text of the printing

const [alertStatus, setAlertStatus] = useState(false);

<PAlert status={alertStatus} close={() => setAlertStatus(false)} message="Lorem Ipsum..."/>

Types #

Alert comes in 4 different types. info comes by default. The other three are danger, warning and success types.

Lorem Ipsum is simply dummy text of the printing

<PAlert type="success" />

Closable #

Thanks to the closable feature, you can control whether the alert can be closed. You can use it to show fixed message.

Lorem Ipsum is simply dummy text of the printing

<PAlert status={true} closable={false} />

Lifetime #

Here, we can enable the alert component to be closed automatically with the lifetime feature. However, since the state is outside, it still needs the close and status props. Because the lifetime feature triggers the close feature of the component. It also controls the closable feature.

<PAlert lifetime={3000} status={alertStatus} close={() => setAlertStatus(false)} />

Accessibility (Not Ready Yet) #

None

Api #

Here you can see all the working features for the alert component.

Name	Type	Default	Description
type	AlertType \| success \| info \| danger \| warning	info	Type of the component
status	boolean \| true \| false	false	Status state of the component
message	string	null	Message of the component
close	function	void	Close function of the component
closable	boolean \| true \| false	true	Closable status state of the component
lifetime	number	undefined	Lifetime property of the component

Installation

Badge