Alert API

Learn about the Alert component's props and CSS classes.

Import

import {
  AlertProps,
  AlertTitleProps,
  AlertDescriptionProps,
} from "@prismane/core";

Alert extends Flex and Animation components' props.

Name	Type	Description	Default
`variant`	`info / warning / error / success`	The variant of the alert.	info
`icon`	`ReactNode`	The icon of the alert.	Based on `variant`
`action`	`ReactNode`	The custom action of the alert.	-
`closable`	`boolean`	The boolean that triggers if the alert can be closed.	-

Alert.Title extends Text component's props.

Alert.Description extends Text component's props.

Alert extends Flex and Animation components' CSS classes.

Rule	Global Class	Description
`root`	`.PrismaneAlert-root`	The wrapper box of the alert.
`root`	`.PrismaneAlert-root-{variant}`	The wrapper box of the alert based on alert's variant.
`icon`	`.PrismaneAlert-icon`	The wrapper box of the alert's icon.
`icon`	`.PrismaneAlert-icon-{variant}`	The wrapper box of the alert's icon based on alert's variant.
`text`	`.PrismaneAlert-text`	The wrapper box of the alert's text.
`text`	`.PrismaneAlert-text-{variant}`	The wrapper box of the alert's text based on alert's variant.
`action`	`.PrismaneAlert-action`	The wrapper box of the alert's action.
`action`	`.PrismaneAlert-action-{variant}`	The wrapper box of the alert's action based on alert's variant.

Alert.Title extends Text component's CSS classes.

Rule	Global Class	Description
`root`	`.PrismaneAlertTitle-root`	The wrapper box of the accordion control.

Alert.Description extends Text component's CSS classes.

Rule	Global Class	Description
`root`	`.PrismaneAlertDescription-root`	The wrapper box of the accordion icon.