mirror of
https://github.com/bitwarden/browser
synced 2025-12-12 22:33:35 +00:00
Storybook docs (#5552)
* 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>
This commit is contained in:
39
libs/components/src/link/link.mdx
Normal file
39
libs/components/src/link/link.mdx
Normal file
@@ -0,0 +1,39 @@
|
||||
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
|
||||
|
||||
import * as stories from "./link.stories";
|
||||
|
||||
<Meta of={stories} />
|
||||
|
||||
# Link / Text button
|
||||
|
||||
Text Links and Buttons use the `primary-500` color and can use either the `<a>` or `<button>` tags.
|
||||
Choose which based on the action the button takes:
|
||||
|
||||
- if navigating to a new page, use a `<a>`
|
||||
- if taking an action on the current page use a `<button>`
|
||||
|
||||
Text buttons or links are most commonly used in paragraphs of text or in forms to customize actions
|
||||
or show/hide additional form options.
|
||||
|
||||
<Primary />
|
||||
<Controls />
|
||||
|
||||
## Sizes
|
||||
|
||||
There are 2 sizes for the component: default and small.
|
||||
|
||||
Default uses `text-base` and small uses `text-xs`
|
||||
|
||||
## 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.
|
||||
Reference in New Issue
Block a user