Alert

Last updated: 2.0.0 (19/01/2024)

Usage

import { Alert } from "@valence-ui/core";
import { IconAlertCircle } from "@tabler/icons-react";

function MyComponent() { 
    const [show, setShow] = React.useState(true);

    return ( 
        <Alert
            alert={{
                title: "Alert title",
                message: "Alert message",
                icon: <IconAlertCircle />,
            }}
            show={show}
        />
    )
}

Controlled alert content

import { Alert, AlertContent } from "@valence-ui/core";
import { IconAlertCircle } from "@tabler/icons-react";

function MyComponent() { 
    const [alert, setAlert] = React.useState<AlertContent | null>({
        title: "Alert title",
        message: "Alert message",
        icon: <IconAlertCircle />,
    });

    return ( 
        <Alert
            alert={alert}
            show={alert !== null}
        />
    )
}

Actions on click

import { Alert } from "@valence-ui/core";
import { IconAlertCircle } from "@tabler/icons-react";

function MyComponent() { 
    
    function handleClick() { 
        console.log("Alert was clicked!");
    }

    return ( 
        <Alert
            alert={{
                title: "Alert title",
                message: "Alert message",
                icon: <IconAlertCircle />,
            }}
            show={true}
            onClick={handleClick}
        />
    )
}

Other button attributes and behaviors can be passed to the Alert as well.

Alert levels

The variant prop can be used to display the alert with different appearances. These variants can be used to create awareness and urgency in the alert, which may be useful when displaying errors, etc.

1. "filled" makes the alert very visible, which is useful for displaying major errors. E.g. input validation error, save failure, etc.

2. "light" draws attention to the alert, but with a softness that is more suitable for positive updates or minor errors. E.g. successful save, non-breaking error, etc.

3. "subtle" is the least attention-grabbing of the three, and is best used for very minor alerts. E.g. additional information about an action, ideal input content, etc.

---

Props

Extends GenericClickableProps, GenericClickableEventProps, PolymorphicButtonProps and GenericLayoutProps.

Property	Type	Description
alert (required)	AlertContent	The content of this alert.
show	boolean	Whether to mount and show this alert.
variant	FillVariant	The styling variant of this alert. Defaults to filled.
size	ComponentSize	The size of this alert. Defaults to the theme default size.
radius	ComponentSize	The border size of this alert. Defaults to the theme default radius size.
shadow	boolean	Specifies if a shadow will be shown.
motion	MotionBehaviourProps	Defines motion behavior for this button. This will automatically be overridden if the user has reduced motion enabled on their device.

AlertContent

Property	Type	Description
title (required)	string	The title of this alert.
message	string	The message of this alert.
icon	ReactNode	The icon of this alert.