Banner component is used to display a prominent message and related optional calls to action.
`Button` component with the variant `inverted` must be used for the actions.

date

description

Icon appended before Badge content

See {@link https://sema4ai-design-system.pages.dev/data-display/badge#icon}

icon

message

Should the Banner indicate visually that there are multiple notifications

stacked

variant

() => {
  return (
    <Box display="flex" width="100%" flexDirection="column" gap="$32">
      <Banner
        message="Error"
        description={
          <span>
            Message explanation.{' '}
            <Link variant="secondary" href="/">
              {' '}
              Try Again
            </Link>{' '}
            or{' '}
            <Link variant="secondary" href="/">
              Ignore
            </Link>
            .
          </span>
        }
        icon={IconInformation}
        variant="error"
      >
        <Button variant="ghost" aria-label="Close" size="small" iconAfter={IconClose} />
      </Banner>
      <Banner
        message="Notification"
        description={
          <span>
            Message explanation.{' '}
            <Link variant="secondary" href="/">
              {' '}
              Try Again
            </Link>{' '}
            or{' '}
            <Link variant="secondary" href="/">
              Ignore
            </Link>
            .
          </span>
        }
        icon={IconLightBulb}
        variant="alert"
      >
        <Button variant="ghost" aria-label="Close" size="small" iconAfter={IconClose} />
      </Banner>
      <Banner
        message="Success"
        description={
          <span>
            Message explanation.{' '}
            <Link variant="secondary" href="/">
              {' '}
              Try Again
            </Link>{' '}
            or{' '}
            <Link variant="secondary" href="/">
              Ignore
            </Link>
            .
          </span>
        }
        icon={IconCheckCircle}
        variant="success"
      >
        <Button variant="ghost" aria-label="Close" size="small" iconAfter={IconClose} />
      </Banner>

      <Banner
        message="Information"
        description={
          <span>
            Message explanation.{' '}
            <Link variant="secondary" href="/">
              {' '}
              Try Again
            </Link>{' '}
            or{' '}
            <Link variant="secondary" href="/">
              Ignore
            </Link>
            .
          </span>
        }
        icon={IconLightBulb}
        variant="info"
      >
        <Button variant="ghost" aria-label="Close" size="small" iconAfter={IconClose} />
      </Banner>
    </Box>
  );
}

Name	Description	Default
date	The date of the event	-
description	The description of the Banner	-
icon	Icon appended before Badge content	-
message required	The main message of the Banner	-
stacked	Should the Banner indicate visually that there are multiple notifications	-
variant	Banner variant	-