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>

libs/components/src/badge/badge.mdx

@@ -0,0 +1,67 @@
+import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
+
+import * as stories from "./badge.stories";
+
+<Meta of={stories} />
+
+# 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.