NavButton docs + preview

@stellar/design-system-website/docs/components/buttons/nav-button.mdx

@@ -0,0 +1,24 @@
+---
+slug: /nav-button
+---
+
+# Navigation button
+
+<ComponentDescription componentName="NavButton" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="NavButton">
+  <NavButton
+    icon={<Icon.Menu />}
+    id="nav-button"
+    onClick={() => {}}
+    title="Menu"
+  />
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="NavButton" />

@stellar/design-system-website/src/componentPreview/navButtonPreview.tsx

@@ -0,0 +1,16 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const navButtonPreview: ComponentPreview = {
+  options: [
+    {
+      type: "checkbox",
+      prop: "disabled",
+      label: "Disabled",
+    },
+    {
+      type: "checkbox",
+      prop: "showBorder",
+      label: "Show border",
+    },
+  ],
+};

@stellar/design-system-website/src/components/PreviewBlock/index.tsx

@@ -19,6 +19,7 @@ import { iconButtonPreview } from "@site/src/componentPreview/iconButtonPreview"
 import { inputPreview } from "@site/src/componentPreview/inputPreview";
 import { linkPreview } from "@site/src/componentPreview/linkPreview";
 import { loaderPreview } from "@site/src/componentPreview/loaderPreview";
+import { navButtonPreview } from "@site/src/componentPreview/navButtonPreview";
 import { notificationPreview } from "@site/src/componentPreview/notificationPreview ";
 import { paragraphPreview } from "@site/src/componentPreview/paragraphPreview";
 import { profilePreview } from "@site/src/componentPreview/profilePreview";
@@ -47,6 +48,7 @@ const previews: { [key: string]: ComponentPreview } = {
   Input: inputPreview,
   Link: linkPreview,
   Loader: loaderPreview,
+  NavButton: navButtonPreview,
   Notification: notificationPreview,
   Paragraph: paragraphPreview,
   Profile: profilePreview,

@stellar/design-system/src/components/NavButton/index.tsx

@@ -1,23 +1,33 @@
 import React from "react";
 import "./styles.scss";
 
-interface NavButtonProps {
+/** */
+export interface NavButtonProps {
+  /** ID of the component should be unique */
   id: string;
+  /** Title or label to show on hover */
   title: string;
+  /** Action to trigger on click */
   onClick: () => void;
+  /** Icon of the component */
   icon: React.ReactNode;
+  /** Disable the component */
   disabled?: boolean;
+  /** Show border around the component */
   showBorder?: boolean;
 }
 
+/**
+ * `NavButton` is used to trigger actions like toggle dark and light mode, close a modal, and toggle side navigation.
+ */
 export const NavButton: React.FC<NavButtonProps> = ({
   id,
   title,
   onClick,
   icon,
   disabled,
   showBorder,
-}) => (
+}: NavButtonProps) => (
   <button
     id={id}
     className={`NavButton ${showBorder ? "NavButton--border" : ""}`}