mirror of
https://github.com/bitwarden/browser
synced 2026-01-06 10:33:57 +00:00
6ef6140b29
* updated sort order
* Update preview.tsx
* Create avatar.mdx
Added avatar documentation based on Figma docs
* Added badge docs
* fixed typos
* added breadcrumb docs
* Added callout docs
* added color password docs
* Added dialog docs
* fixed typo
* Updated Dialogs docs
Added a dialogs.mdx page for general docs that apply to both main Dialogs and Simple Dialogs.
Updated the sub-docs pages
* Update simple-dialog.mdx
* Added documentation from Figma to Forms docs
* Create icon-button.mdx
* added link docs
* Added menu docs
* Added progress indicator docs
* Updated table docs
* Added tab docs
* Added toggle group docs
* Revert "Update preview.tsx"
This reverts commit 4671d9726a.
* added docs for appA11yTitle
* Fixed typos
* Update libs/components/src/link/link.mdx
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
* Update libs/components/src/menu/menu.mdx
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
* Addressed feedback
* Addressed feedback on callout, menu, and progress
* moved stories mdx files to proper location
* Addressed feedback on dialogs.mdx
* Update libs/components/src/tabs/tabs.mdx
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
* Addressed feedback on Tabs
* ran prettier
* Fixed title formatting
* ran prettier
* Update libs/components/src/dialog/dialogs.mdx
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
* ran prettier
---------
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
60 lines
1.7 KiB
Plaintext
60 lines
1.7 KiB
Plaintext
import { Meta, Story, Controls, Canvas, Primary } from "@storybook/addon-docs";
|
|
|
|
import * as stories from "./banner.stories";
|
|
|
|
<Meta of={stories} />
|
|
|
|
# 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 dismissible 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).
|
|
|
|
<Primary />
|
|
|
|
<Controls />
|
|
|
|
## 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 of={stories.Premium} />
|
|
|
|
Used primarily to encourage user to upgrade to premium.
|
|
|
|
### Info
|
|
|
|
<Story of={stories.Info} />
|
|
|
|
Used to communicate release notes, server maintenance or other informative event.
|
|
|
|
### Warning
|
|
|
|
<Story of={stories.Warning} />
|
|
|
|
Used to alert the user of outdated info or versions.
|
|
|
|
### Danger
|
|
|
|
<Story of={stories.Danger} />
|
|
|
|
Rarely used, but may be used to alert users over critical messages or very outdated versions.
|
|
|
|
## Accessibility
|
|
|
|
Banners 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"`.
|