Alert

View Chakra UI documentation
<Stack spacing="6">

// Default Alert
<Alert>
    <AlertIcon />
    <AlertDescription>Alert message</AlertDescription>
</Alert>

// Error Alert
<Alert status="error">
    <AlertIcon />
    <AlertDescription>Error alert message</AlertDescription>
</Alert>

// Warning Alert
<Alert status="warning">
    <AlertIcon />
    <AlertDescription>Warning alert message</AlertDescription>
</Alert>

// Success Alert
<Alert status="success">
    <AlertIcon />
    <AlertDescription>Success alert message</AlertDescription>
</Alert>

//Info Alert
<Alert status="info">
    <AlertIcon />
    <AlertDescription>Info alert message</AlertDescription>
</Alert>

// Loading Alert
<Alert status="loading">
    <AlertIcon />
    <AlertDescription>Loading alert message</AlertDescription>
</Alert>

//Neutral Alert
<Alert colorScheme="neutral">
    <AlertIcon />
    <AlertDescription>Neutral alert message</AlertDescription>
</Alert>

// Alert with Button
<Alert>
    <AlertIcon />
    <Wrap>
        <AlertDescription>Alert with Button.</AlertDescription>
        <Button variant="link">Button</Button>
    </Wrap>
</Alert>

// Alert with Title, long message, and Button
<Alert>
    <AlertIcon />
    <Wrap>
        <AlertTitle>Alert with Title, long message, and Button</AlertTitle>
        <AlertDescription>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
            odio. Quisque volutpat mattis eros. Nullam malesuada erat ut
            turpis. Suspendisse urna nibh, viverra non, semper suscipit,
            posuere a, pede. Donec nec justo eget felis facilisis fermentum.
            Aliquam porttitor mauris sit amet orci. Aenean dignissim
            pellentesque felis.
        </AlertDescription>
        <Button variant="link">Button</Button>
    </Wrap>
</Alert>

// Alert with Close Button
<Alert>
    <AlertIcon />
    <AlertDescription w="full">Alert with Close Button</AlertDescription>
    <CloseButton m="-1" />
</Alert>

// Alert with Button and Close Button
<Alert>
    <AlertIcon />
    <Wrap w="full">
        <AlertDescription>
            Alert with Button and Close Button.
        </AlertDescription>
        <Button variant="link">Button</Button>
    </Wrap>
    <CloseButton m="-1" />
</Alert>

// Alert with Title, long message, Button, and Close Button
<Alert>
    <AlertIcon />
    <Wrap w="full">
        <AlertTitle>
            Alert with Title, long message, Button, and Close Button
        </AlertTitle>
        <AlertDescription>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
            odio. Quisque volutpat mattis eros. Nullam malesuada erat ut
            turpis. Suspendisse urna nibh, viverra non, semper suscipit,
            posuere a, pede. Donec nec justo eget felis facilisis fermentum.
            Aliquam porttitor mauris sit amet orci. Aenean dignissim
            pellentesque felis.
        </AlertDescription>
        <Button variant="link">Button</Button>
    </Wrap>
    <CloseButton m="-1" />
</Alert>
</Stack>