export default function Example() {
  return (
    <Box
      css={{
        display: "flex",
        width: "100%",
        rowGap: "$100",
        flexDirection: "column",
      }}
    >
      <AlertBanner.Root variant="error">
        <AlertBanner.Content>Error</AlertBanner.Content>
      </AlertBanner.Root>
      <AlertBanner.Root variant="information">
        <AlertBanner.Content>Information</AlertBanner.Content>
      </AlertBanner.Root>
      <AlertBanner.Root variant="success">
        <AlertBanner.Content>Success</AlertBanner.Content>
      </AlertBanner.Root>
      <AlertBanner.Root variant="warning">
        <AlertBanner.Content>Warning</AlertBanner.Content>
      </AlertBanner.Root>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape