bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 08:13:42 +00:00
Code Issues Releases Wiki Activity

[CL-444] Use Canvas story wrapper properly (#13375)

Browse Source
This commit is contained in:
Vicki League
2025-02-12 11:26:21 -05:00
committed by GitHub
parent 9dd47a15ce
commit 2284fe32be
24 changed files with 120 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
libs/components/src/badge/badge.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./badge.stories";
@@ -31,39 +31,39 @@ The story below uses the `<button>` element to demonstrate all the possible stat
The primary badge is used to indicate an active status (example: device management page) or provide
additional information (example: type of emergency access granted).
<Story of={stories.Primary} />
<Canvas of={stories.Primary} />
### Secondary
The secondary badge style is typically is a default badge style. It is often used to indicate
neutral information.
<Story of={stories.Secondary} />
<Canvas of={stories.Secondary} />
### Success
The success badge is used to indicate a positive status, OR to indicate a feature requires a Premium
subscription. See [Premium Badge](?path=/docs/web-premium-badge--docs)
<Story of={stories.Success} />
<Canvas of={stories.Success} />
### Danger
The danger badge is used to indicate a negative status.
<Story of={stories.Danger} />
<Canvas of={stories.Danger} />
### Warning
The warning badge is used to indicate a status waiting on an additional action from the active user.
<Story of={stories.Warning} />
<Canvas of={stories.Warning} />
### Info
The info badge is used to indicate a low emphasis informative information.
<Story of={stories.Info} />
<Canvas of={stories.Info} />
## Badges as counters