import { Meta, Story } from "@storybook/addon-docs";

<Meta title="Documentation/Banner" />

# Banner

Banners are used for important communication with the user that needs to be seen right away, but has little effect on the experience. Banners appear at the top of the user's screen on page load and persist across all pages a user navigates to.

- They should always be dismissable and never use a timeout. If a user dismisses a banner, it should not reappear during that same active session.

- Use banners sparingly, as they can feel intrusive to the user if they appear unexpectedly. Their effectiveness may decrease if too many are used.

- Avoid stacking multiple banners.

- Banners support a button link (text button).

## Types

Icons should remain consistent across these types. Do not change the icon without consulting designers.

Use the following guidelines to help choose the correct type of banner.

### Premium

<Story id="component-library-banner--premium" />

Used primarily to encourage user to upgrade to premium.

### Info

<Story id="component-library-banner--info" />

Used to communicate release notes, server maintenance or other informative event.

### Warning

<Story id="component-library-banner--warning" />

Used to alert the user of outdated info or versions.

### Danger

<Story id="component-library-banner--danger" />

Rarely used, but may be used to alert users over critical messages or very outdated versions.

## Accessibility

Include `role="status" aria-live="polite"` attributes to ensure screen readers announce the content prior to the test of the page.
