2022-10-17 20:25:55 +02:00
|
|
|
import { Meta, Story } from "@storybook/addon-docs";
|
|
|
|
|
|
2022-10-18 16:54:27 +02:00
|
|
|
<Meta title="Documentation/Banner" />
|
2022-10-17 20:25:55 +02:00
|
|
|
|
|
|
|
|
# Banner
|
|
|
|
|
|
2023-05-05 17:13:54 +02:00
|
|
|
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.
|
2022-10-17 20:25:55 +02:00
|
|
|
- Avoid stacking multiple banners.
|
2023-05-05 17:13:54 +02:00
|
|
|
- Banners supports buttons and anchors using [bitLink](?path=/story/component-library-link--anchors).
|
2022-10-17 20:25:55 +02:00
|
|
|
|
|
|
|
|
## 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
|
|
|
|
|
|
2023-05-05 17:13:54 +02:00
|
|
|
Dialogs sets the `role="status"` and `aria-live="polite"` attributes to ensure screen readers announce the content
|
|
|
|
|
prior to the test of the page. This behaviour can be disabled by setting `[useAlertRole]="false"`.
|
