Skip to content
Blueprint

Alert Banner

Alert Banners are used to display notifications or time-sensitive information, including links. They are typically displayed at the top of the page and can be used to inform users of important information or actions they need to take.

Consectetur quis magna

Ea incididunt non aliqua consequat deserunt. Lorem excepteur labore aute amet ullamco sit magna do exercitation est cillum Lorem enim. Non sit est non veniam ea duis magna commodo enim ex.

 
<AlertBanner class="flex-col gap-16">
  <h2 class="text-md font-bold">Consectetur quis magna</h2>
  <p>
    Ea incididunt non aliqua consequat deserunt. Lorem excepteur labore
    aute amet ullamco sit magna do exercitation est cillum Lorem enim.
    Non sit est non veniam ea duis magna commodo enim ex.
  </p>
</AlertBanner>

API Reference

This component is based on the <div> element and can take in any additional HTML attributes. The following are the custom props that can be passed to the component.

Prop Type Default
hideClose
boolean false

Accessibility

The <AlertBanner> component is designed to be accessible by default. The following are some additional accessibility features that have been implemented in the component:

  • The component includes the role="alert" attribute to indicate that it contains important information that should be conveyed to the user.
  • The component includes the aria-live="assertive" attribute to ensure that screen readers announce the content immediately.
  • The component includes the aria-atomic="true" attribute to ensure that screen readers announce the entire content of the alert banner when it changes.

Examples

Hide Close

Use the hideClose prop to hide the close button from the Alert Banner.

Consectetur quis magna

Ea incididunt non aliqua consequat deserunt. Lorem excepteur labore aute amet ullamco sit magna do exercitation est cillum Lorem enim. Non sit est non veniam ea duis magna commodo enim ex.

 
<AlertBanner hideClose class="flex-col gap-16">
  <h2 class="text-md font-bold">Consectetur quis magna</h2>
  <p>
    Ea incididunt non aliqua consequat deserunt. Lorem excepteur labore
    aute amet ullamco sit magna do exercitation est cillum Lorem enim.
    Non sit est non veniam ea duis magna commodo enim ex.
  </p>
</AlertBanner>

Astro Component

Depending on the framework, it’s sometimes beneficial to use a component for generating the Alert Banner. In this case, we have put together the following Astro component using a custom element to serve as a blueprint for how you could possibly set up an Alert Banner component, and what properties to consider.

AlertBanner.astro
---
import type { HTMLAttributes } from 'astro/types'
import Button from '@/components/elements/Button.astro'
import close from '@/assets/svg/close.svg?raw'


interface Props extends HTMLAttributes<'div'> {
  /**
    Whether or not the close button should be hidden.
  */
  hideClose?: boolean
}


const { hideClose = false, class: className, ...attrs } = Astro.props
---


<custom-alert-banner
  role="alert"
  data-component="AlertBanner"
  aria-live="assertive"
  aria-atomic="true"
>
  <div
    class:list={[
      'relative flex bg-sky-100 p-24 dark:bg-gray-600 dark:text-white lg:p-48',
      className,
    ]}
    {...attrs}
  >
    <slot>
      <div class="flex items-center">
        No content has been provided for this dialog.
      </div>
    </slot>


    {
      !hideClose && (
        <Button
          icon
          size="sm"
          title="Close"
          variant="subtle"
          class="absolute right-24 top-24"
          data-dialog="close"
        >
          <Fragment set:html={close} />
          Close
        </Button>
      )
    }
  </div>
</custom-alert-banner>


<script>
  class CustomAlertBanner extends HTMLElement {
    constructor() {
      super()


      const alertButton = this.querySelector('[data-dialog="close"]')


      if (alertButton) {
        alertButton.addEventListener('click', () => {
          this.remove()
        })
      }
    }
  }


  customElements.define('custom-alert-banner', CustomAlertBanner)
</script>