@chakra-ui/alert

Basic Alert

This code demonstrates how to create a basic error alert using the @chakra-ui/alert package. The Alert component is used with a status prop set to 'error' to indicate the type of alert.

import { Alert, AlertIcon } from '@chakra-ui/alert';

function BasicAlert() {
  return (
    <Alert status='error'>
      <AlertIcon />
      There was an error processing your request
    </Alert>
  );
}

Custom Alert

This code demonstrates how to create a custom alert with a title and description. The Alert component is used with a status prop set to 'success', and additional components like AlertTitle and AlertDescription are used to provide more detailed information.

import { Alert, AlertIcon, AlertTitle, AlertDescription } from '@chakra-ui/alert';

function CustomAlert() {
  return (
    <Alert status='success'>
      <AlertIcon />
      <AlertTitle>Success!</AlertTitle>
      <AlertDescription>Your application has been submitted successfully.</AlertDescription>
    </Alert>
  );
}

Closable Alert

This code demonstrates how to create a closable alert. The Alert component is used with a status prop set to 'warning', and a CloseButton component is added to allow users to dismiss the alert.

import { Alert, AlertIcon, CloseButton } from '@chakra-ui/alert';

function ClosableAlert() {
  return (
    <Alert status='warning'>
      <AlertIcon />
      Warning: Your trial period is about to expire.
      <CloseButton position='absolute' right='8px' top='8px' />
    </Alert>
  );
}