Alert
Alert displays an important message for an action.Import
import { Alert } from "@prismane/core";
Usage
Alert component can display an alert for four kinds of messages: info, success, warning and error
<Stack> <Alert variant="info"> This is an info alert. It provides important information or updates. </Alert> <Alert variant="success"> This is an success alert. It provides important information or updates. </Alert> <Alert variant="warning"> This is an warning alert. It provides important information or updates. </Alert> <Alert variant="error"> This is an error alert. It provides important information or updates. </Alert> </Stack>
Closable Alert
By providing the closable prop to the alert, it displays a close button, which will close the alert.
<Alert closable> This is a closable alert. Click the close button to dismiss it. </Alert>
Custom Alert Icon
Alert's icon can be changed, by passing another icon to the icon prop.
<Alert icon={<WarningDiamond size={24} />} variant="warning" closable> This is an alert with a custom icon. </Alert>
Complex Alert
<Alert closable miw={fr(192)}> <Alert.Title>Demo alert title</Alert.Title> <Alert.Description> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </Alert.Description> </Alert>
API
Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.
- -
Alert