Alert

Alerts are used to communicate a state that affects a system, feature or page.

This component extends
Chakra UI Alert

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

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

This website uses cookies

To ensure optimum experience, this website uses cookies for customized advertisements and analytics.

<Alert bg='white'>
  <Box flex="1">
    <AlertTitle fontSize='16px'>This website uses cookies</AlertTitle>
    <AlertDescription display="block" fontSize='14px'>
      To ensure optimum experience, this website uses cookies for customized advertisements and analytics.
    </AlertDescription>
  </Box>
  <Box flex>
    <Stack direction="row" spacing={4}>
        <Button variant='outline' colorScheme='hue-green'>Cancel</Button>
        <Button variant='solid' colorScheme='hue-green'>Accept</Button>
    </Stack>
  </Box>
</Alert>

<Alert bg='white'>
  <Box flex="1">
    <AlertTitle fontSize='16px'>This website uses cookies</AlertTitle>
    <AlertDescription display="block" fontSize='14px'>
      To ensure optimum experience, this website uses cookies for customized advertisements and analytics.
    </AlertDescription>
  </Box>
  <Box flex>
    <Stack direction="row" spacing={4}>
        <Button variant='outline' colorScheme='hue-green'>Cancel</Button>
        <Button variant='solid' colorScheme='hue-green'>Accept</Button>
    </Stack>
  </Box>
</Alert>

Editable Example