mirror of
https://github.com/bitwarden/browser
synced 2026-02-20 19:34:03 +00:00
5eb8d7b181
* rearrange button docs * Enhance avatar docs * Enhance badge docs * Enhance banner docs * add util to format args for snippets * update banner snippets * WIP * bind boolean args so they work correctly in Storybook * simplify button stories * Update callout docs * use title component for checkbox docs * use title and description component for chip select docs * update color password story docs * update disclosure docs * add import to icon docs * updated icon-button docs * update link docs * Update prgress docs * updated search field docs * remove html type definitions * add import for progress * updated toast docs * remove example from docs. format args for snippet * Update badges docs * handle array arg values correctly * Update badges list docs * fix dupe key error from taost story * remove unnecessary typeof check * remove banner usage example * add breadcrumbs import statement and jsdoc * add color password import statement * fixing type mismaches * fix typos * Add missing generics to format function * fix typo * update callout icon spacing to match Figma * add back max width container
45 lines
1.3 KiB
Plaintext
45 lines
1.3 KiB
Plaintext
import { Meta, Story, Primary, Controls, Title, Description } from "@storybook/addon-docs";
|
|
|
|
import * as stories from "./link.stories";
|
|
|
|
<Meta of={stories} />
|
|
|
|
```ts
|
|
import { LinkModule } from "@bitwarden/components";
|
|
```
|
|
|
|
<Title>Link / Text button</Title>
|
|
<Description />
|
|
|
|
<Primary />
|
|
<Controls />
|
|
|
|
## Variants
|
|
|
|
You can use one of the following variants by providing it as the `linkType` input:
|
|
|
|
- `primary` - most common, uses brand color
|
|
- `secondary` - matches the main text color
|
|
- `contrast` - for high contrast against a dark background (or a light background in dark mode)
|
|
- `light` - always a light color, even in dark mode
|
|
|
|
## Sizes
|
|
|
|
If you want to display a link with a smaller text size, apply the `tw-text-sm` class. This will
|
|
match the `body2` variant of the Typography directive.
|
|
|
|
## With icons
|
|
|
|
Text Links/buttons can have icons on left or the right.
|
|
|
|
To indicate a new or add action, the <i class="bwi bwi-plus-circle"></i> icon on is used on the
|
|
left.
|
|
|
|
An angle icon, <i class="bwi bwi-angle-right"></i>, is used on the left to indicate an expand to
|
|
show/hide additional content.
|
|
|
|
## Accessibility
|
|
|
|
- Make sure to only use the Link on backgrounds that maintain the WCAG color contrast ratios.
|
|
- Be sure to select the correct element type (anchor or button) for the intended action.
|