Alert Component

A brash component that contains important text; it is meant to grab attention, or annoy.

Interface

declare namespace Alert {

interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {}

interface Props extends React.HTMLAttributes<HTMLDivElement> {
        Content: React.FC;
        Icon: React.FC;
        Button: React.FC<ButtonProps>;
        isVisible: boolean;
    }
}

Example Implementation

function Alert({
        Content,
        Icon,
        Button,
        isVisible,
        className,
        ...props
}: Alert.Props) {
        if (!isVisible) return <></>;
        return (
                <div
                        role="alert"
                        {...props}
                >
                        <div>
                                <Icon />
                                <Content />
                                <Button />
                        </div>
                </div>
        );
}

Base Alert

Success Alert

Information Alert