mirror of
https://github.com/bitwarden/browser
synced 2025-12-18 09:13:33 +00:00
66d9ab5dc0
* add component import examples * component library story html formatting/cleanup nits * Update libs/components/src/dialog/dialog/dialog.mdx Co-authored-by: Will Martin <contact@willmartian.com> * Update libs/components/src/badge/badge.mdx Co-authored-by: Will Martin <contact@willmartian.com> * Update libs/components/src/dialog/simple-dialog/simple-dialog.mdx Co-authored-by: Will Martin <contact@willmartian.com> --------- Co-authored-by: Will Martin <contact@willmartian.com>
72 lines
1.9 KiB
Plaintext
72 lines
1.9 KiB
Plaintext
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
|
|
|
|
import * as stories from "./badge.stories";
|
|
|
|
<Meta of={stories} />
|
|
|
|
```ts
|
|
import { BadgeModule } from "@bitwarden/components";
|
|
```
|
|
|
|
# Badge
|
|
|
|
The Badge directive can be used on a `<span>` (non clickable events), or an `<a>` or `<button>` tag
|
|
for interactive events. The Focus and Hover states only apply to badges used for interactive events.
|
|
|
|
Typically Badges are only used with text set to `text-xs`. If additional sizes are needed, the
|
|
component configurations may be reviewed and adjusted.
|
|
|
|
<Primary />
|
|
<Controls />
|
|
|
|
## Styles
|
|
|
|
### 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).
|
|
|
|
<Story 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} />
|
|
|
|
### 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} />
|
|
|
|
### Danger
|
|
|
|
The danger badge is used to indicate a negative status.
|
|
|
|
<Story 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} />
|
|
|
|
### Info
|
|
|
|
The info badge is used to indicate a low emphasis informative information.
|
|
|
|
<Story 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.
|