Alert

Alert to communicate a state that affects a system, feature or page.

Start using via importing:

import { Alert } from "@perceptui/ui";

This is alert.

<Alert message="This is alert." />

API References

Prop	Type	Description	Default
variant	`"solid" \| "outline"`	Form of the Alert	solid
type	`"success" \| "warning" \| "error" \| "info"`	Type of the Alert	success
message	`string`	Message of the Alert	_
icon	`ReactNode`	Icon of the Alert	type
className	`string`	className	_

Use the variant prop to control the visual style of the button.

This is alert with solid variant.

This is alert with outline variant.

<Alert variant="solid" message="This is alert with solid variant." />

<Alert variant="outline" message="This is alert with outline variant." />

Use the type prop to control the type of the alert.

This is alert with success type.

This is alert with warning type.

This is alert with info type.

This is alert with error type.

<Alert type="success" message="This is alert with success type." />

<Alert type="warning" message="This is alert with warning type." />

<Alert type="info" message="This is alert with info type." />

<Alert type="error" message="This is alert with error type." />