mirror of
https://github.com/bitwarden/clients.git
synced 2025-12-05 19:17:06 -06:00
67 lines
1.6 KiB
Plaintext
67 lines
1.6 KiB
Plaintext
import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";
|
|
|
|
import * as stories from "./badge.stories";
|
|
|
|
<Meta of={stories} />
|
|
|
|
```ts
|
|
import { BadgeModule } from "@bitwarden/components";
|
|
```
|
|
|
|
<Title />
|
|
<Description />
|
|
|
|
<Primary />
|
|
<Controls />
|
|
|
|
## Styles
|
|
|
|
### Default / Primary
|
|
|
|
The primary badge is used to indicate an active status (example: device management page) or provide
|
|
additional information (example: type of emergency access granted).
|
|
|
|
<Canvas of={stories.Primary} />
|
|
|
|
### Secondary
|
|
|
|
The secondary badge style is typically is a default badge style. It is often used to indicate
|
|
neutral information.
|
|
|
|
<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)
|
|
|
|
<Canvas of={stories.Success} />
|
|
|
|
### Danger
|
|
|
|
The danger badge is used to indicate a negative status.
|
|
|
|
<Canvas of={stories.Danger} />
|
|
|
|
### Warning
|
|
|
|
The warning badge is used to indicate a status waiting on an additional action from the active user.
|
|
|
|
<Canvas of={stories.Warning} />
|
|
|
|
### Info
|
|
|
|
The info badge is used to indicate a low emphasis informative information.
|
|
|
|
<Canvas of={stories.Info} />
|
|
|
|
## Badges as counters
|
|
|
|
Badges can be used as part of links or buttons to provide a counter. See the
|
|
[Toggle Group](?path=/docs/component-library-toggle-group--docs) component.
|
|
|
|
## Accessibility
|
|
|
|
Be sure to use the correct html tag based on the purpose or function of the badge. Follow color WCAG
|
|
color contrast guidelines for small text.
|