feat(docs): search cmdk implemented

2025-12-08 19:26:11 +00:00 · 2023-06-18 15:06:43 -03:00 · 2023-06-18 15:06:43 -03:00 · 129b30f956
commit 129b30f956
parent 71741a115a
157 changed files with 2754 additions and 1560 deletions
--- a/apps/docs/app/docs/[[...slug]]/page.tsx
+++ b/apps/docs/app/docs/[[...slug]]/page.tsx
@ -159,7 +159,7 @@ export default async function DocPage({params}: DocPageProps) {
        </footer>
      </div>
      {headings && headings.length > 0 && (
-        <div className="hidden xl:flex xl:col-span-2 mt-8 pl-4">
+        <div className="hidden z-10 xl:flex xl:col-span-2 mt-8 pl-4">
          <DocsToc headings={headings} />
        </div>
      )}
--- a/apps/docs/app/docs/layout.tsx
+++ b/apps/docs/app/docs/layout.tsx
@ -1,3 +1,5 @@
+import {Image} from "@nextui-org/react";
+
 import manifest from "@/content/docs/manifest.json";
 import {DocsSidebar} from "@/components/docs/sidebar";

@ -7,13 +9,27 @@ interface DocsLayoutProps {

 export default function DocsLayout({children}: DocsLayoutProps) {
  return (
-    <main className="min-h-[calc(100vh_-_64px_-_108px)] mb-12">
-      <div className="grid grid-cols-12">
-        <div className="hidden relative lg:block lg:col-span-2 mt-8 pr-4">
-          <DocsSidebar routes={manifest.routes} />
+    <>
+      <main className="container mx-auto max-w-7xl px-6 pt-16 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
+        <div className="grid grid-cols-12">
+          <div className="hidden relative z-10 lg:block lg:col-span-2 mt-8 pr-4">
+            <DocsSidebar routes={manifest.routes} />
+          </div>
+          {children}
        </div>
-        {children}
+      </main>
+      <div
+        aria-hidden="true"
+        className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-0"
+      >
+        <Image removeWrapper alt="docs left background" src="/gradients/docs-left.png" />
      </div>
-    </main>
+      <div
+        aria-hidden="true"
+        className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-0 rotate-12"
+      >
+        <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
+      </div>
+    </>
  );
 }
--- a/apps/docs/app/layout.tsx
+++ b/apps/docs/app/layout.tsx
@ -4,6 +4,7 @@ import {clsx} from "@nextui-org/shared-utils";

 import {Providers} from "./providers";

+import {Cmdk} from "@/components/cmdk";
 import manifest from "@/content/docs/manifest.json";
 import {siteConfig} from "@/config/site";
 import {fontSans} from "@/config/fonts";
@ -61,9 +62,10 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
        <Providers themeProps={{attribute: "class", defaultTheme: "dark"}}>
          <div className="relative flex flex-col" id="app-container">
            <Navbar routes={manifest.routes} />
-            <main className="container mx-auto max-w-7xl px-6 pt-16 flex-grow">{children}</main>
+            {children}
            <Footer />
          </div>
+          <Cmdk />
        </Providers>
      </body>
    </html>
--- a/apps/docs/app/page.tsx
+++ b/apps/docs/app/page.tsx
@ -29,19 +29,21 @@ export default async function Home() {
  const data = await getData();

  return (
-    <section className="flex flex-col items-center justify-center">
-      <Hero />
-      <FeaturesGrid features={landingContent.topFeatures} />
-      <CustomThemes />
-      <A11yOtb />
-      <DarkMode />
-      <Customization />
-      <LastButNotLeast />
-      <Support sponsors={data.sponsors} />
-      <Spacer y={24} />
-      <InstallBanner />
-      <Community />
-      <Spacer y={24} />
-    </section>
+    <main className="container mx-auto max-w-7xl px-6 pt-16 flex-grow">
+      <section className="flex flex-col items-center justify-center">
+        <Hero />
+        <FeaturesGrid features={landingContent.topFeatures} />
+        <CustomThemes />
+        <A11yOtb />
+        <DarkMode />
+        <Customization />
+        <LastButNotLeast />
+        <Support sponsors={data.sponsors} />
+        <Spacer y={24} />
+        <InstallBanner />
+        <Community />
+        <Spacer y={24} />
+      </section>
+    </main>
  );
 }
--- a/apps/docs/components/cmdk.tsx
+++ b/apps/docs/components/cmdk.tsx
@ -0,0 +1,304 @@
+/* eslint-disable jsx-a11y/no-autofocus */
+"use client";
+
+import {Command} from "cmdk";
+import {useEffect, useState, FC, useMemo, useCallback, useRef} from "react";
+import {matchSorter} from "match-sorter";
+import {Button, Kbd, Modal, ModalContent} from "@nextui-org/react";
+import {CloseIcon} from "@nextui-org/shared-icons";
+import {tv} from "tailwind-variants";
+import {useRouter} from "next/navigation";
+import MultiRef from "react-multi-ref";
+import scrollIntoView from "scroll-into-view-if-needed";
+import {create} from "zustand";
+
+import {
+  DocumentCodeBoldIcon,
+  HashBoldIcon,
+  ChevronRightLinearIcon,
+  SearchLinearIcon,
+} from "./icons";
+
+import searchData from "@/content/docs/search-meta.json";
+import {useUpdateEffect} from "@/hooks/use-update-effect";
+
+export interface CmdkStore {
+  isOpen: boolean;
+  onClose: () => void;
+  onOpen: () => void;
+}
+
+export const useCmdkStore = create<CmdkStore>((set) => ({
+  isOpen: false,
+  onClose: () => set({isOpen: false}),
+  onOpen: () => set({isOpen: true}),
+}));
+
+const cmdk = tv({
+  slots: {
+    base: "max-h-full overflow-y-auto",
+    header: [
+      "flex",
+      "items-center",
+      "w-full",
+      "px-4",
+      "border-b",
+      "border-default-400/50",
+      "dark:border-default-100",
+    ],
+    searchIcon: "text-default-400 text-lg",
+    input: [
+      "w-full",
+      "px-2",
+      "h-14",
+      "font-sans",
+      "text-lg",
+      "outline-none",
+      "rounded-none",
+      "bg-transparent",
+      "text-default-700",
+      "placeholder-default-500",
+      "dark:text-default-500",
+      "dark:placeholder:text-default-300",
+    ],
+    list: ["px-4", "mt-2", "pb-4", "overflow-y-auto", "max-h-[50vh]"],
+    itemWrapper: [
+      "px-4",
+      "mt-2",
+      "group",
+      "flex",
+      "h-16",
+      "justify-between",
+      "items-center",
+      "rounded-lg",
+      "shadow",
+      "bg-content2/50",
+      "active:opacity-70",
+      "cursor-pointer",
+      "transition-opacity",
+      "data-[active=true]:bg-primary",
+      "data-[active=true]:text-primary-foreground",
+    ],
+    leftWrapper: ["flex", "gap-3", "items-center"],
+    leftIcon: [
+      "text-default-500 dark:text-default-300",
+      "group-data-[active=true]:text-primary-foreground",
+    ],
+    itemContent: ["flex", "flex-col", "gap-0", "justify-center"],
+    itemParentTitle: [
+      "text-default-400",
+      "text-xs",
+      "group-data-[active=true]:text-primary-foreground",
+    ],
+    itemTitle: ["text-default-500", "group-data-[active=true]:text-primary-foreground"],
+    emptyWrapper: ["flex", "flex-col", "text-center", "items-center", "justify-center", "h-32"],
+  },
+});
+
+export const Cmdk: FC<{}> = () => {
+  const [query, setQuery] = useState("");
+  const [activeItem, setActiveItem] = useState(0);
+  const [menuNodes] = useState(() => new MultiRef<number, HTMLElement>());
+  const slots = useMemo(() => cmdk(), []);
+
+  const eventRef = useRef<"mouse" | "keyboard">();
+  const listRef = useRef<HTMLDivElement>(null);
+  const router = useRouter();
+
+  const {isOpen, onClose, onOpen} = useCmdkStore();
+
+  const results = useMemo(
+    function getResults() {
+      if (query.length < 2) return [];
+
+      return matchSorter(searchData, query, {
+        keys: ["hierarchy.lvl1", "hierarchy.lvl2", "hierarchy.lvl3", "content"],
+      }).slice(0, 20);
+    },
+    [query],
+  );
+
+  // Toggle the menu when ⌘K / CTRL K is pressed
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      const isAppleDevice = /(Mac|iPhone|iPod|iPad)/i.test(navigator?.platform);
+      const hotkey = isAppleDevice ? "metaKey" : "ctrlKey";
+
+      if (e?.key?.toLowerCase() === "k" && e[hotkey]) {
+        e.preventDefault();
+        isOpen ? onClose() : onOpen();
+      }
+    };
+
+    document.addEventListener("keydown", onKeyDown);
+
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [isOpen]);
+
+  const onInputKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      eventRef.current = "keyboard";
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          if (activeItem + 1 < results.length) {
+            setActiveItem(activeItem + 1);
+          }
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          if (activeItem - 1 >= 0) {
+            setActiveItem(activeItem - 1);
+          }
+          break;
+        }
+        case "Control":
+        case "Alt":
+        case "Shift": {
+          e.preventDefault();
+          break;
+        }
+        case "Enter": {
+          if (results?.length <= 0) {
+            break;
+          }
+
+          onClose();
+          router.push(results[activeItem].url);
+          break;
+        }
+      }
+    },
+    [activeItem, results, router],
+  );
+
+  useUpdateEffect(() => {
+    setActiveItem(0);
+  }, [query]);
+
+  useUpdateEffect(() => {
+    if (!listRef.current || eventRef.current === "mouse") return;
+    const node = menuNodes.map.get(activeItem);
+
+    if (!node) return;
+    scrollIntoView(node, {
+      scrollMode: "if-needed",
+      behavior: "smooth",
+      block: "end",
+      inline: "end",
+      boundary: listRef.current,
+    });
+  }, [activeItem]);
+
+  return (
+    <Modal
+      hideCloseButton
+      backdrop="opaque"
+      classNames={{
+        wrapper: "md:items-start",
+        base: [
+          "mt-[20vh]",
+          "max-w-[calc(100vw-2rem)]",
+          "supports-[backdrop-filter]:bg-background/80",
+          "dark:supports-[backdrop-filter]:bg-background/30",
+          "supports-[backdrop-filter]:backdrop-blur-md",
+          "supports-[backdrop-filter]:backdrop-saturate-150",
+        ],
+        backdrop: ["bg-black/80"],
+      }}
+      isOpen={isOpen}
+      motionProps={{
+        onAnimationComplete: () => {
+          if (!isOpen) {
+            setQuery("");
+          }
+        },
+      }}
+      scrollBehavior="inside"
+      size="xl"
+      onClose={onClose}
+    >
+      <ModalContent>
+        <Command className={slots.base()} label="Global Command Menu" shouldFilter={false}>
+          <div className={slots.header()}>
+            <SearchLinearIcon className={slots.searchIcon()} strokeWidth={2} />
+            <Command.Input
+              autoFocus
+              className={slots.input()}
+              placeholder="Search documentation"
+              value={query}
+              onKeyDown={onInputKeyDown}
+              onValueChange={setQuery}
+            />
+            {query.length > 0 && (
+              <Button
+                isIconOnly
+                className="border data-[hover=true]:bg-content2 border-default-400 dark:border-default-100"
+                size="xs"
+                variant="bordered"
+                onPress={() => setQuery("")}
+              >
+                <CloseIcon />
+              </Button>
+            )}
+            <Kbd className="border-none px-2 py-1 ml-2 font-medium text-[0.6rem]">ESC</Kbd>
+          </div>
+          <Command.List ref={listRef} className={slots.list()} role="listbox">
+            {query.length > 0 ? (
+              <Command.Empty>
+                <div className={slots.emptyWrapper()}>
+                  <div>
+                    <p>No results for &quot;{query}&quot;</p>
+                    <p className="text-default-400">Try searching for something else.</p>
+                  </div>
+                </div>
+              </Command.Empty>
+            ) : (
+              <div className={slots.emptyWrapper()}>
+                <p className="text-default-400">No recent searches</p>
+              </div>
+            )}
+
+            {results.map((item, index) => {
+              const isLvl1 = item.type === "lvl1";
+
+              return (
+                <Command.Item
+                  key={item.objectID}
+                  ref={menuNodes.ref(index)}
+                  className={slots.itemWrapper()}
+                  data-active={index === activeItem}
+                  value={item.content}
+                  onMouseEnter={() => {
+                    eventRef.current = "mouse";
+                    setActiveItem(index);
+                  }}
+                  onSelect={() => {
+                    onClose();
+                    router.push(item.url);
+                  }}
+                >
+                  <div className={slots.leftWrapper()}>
+                    {isLvl1 ? (
+                      <DocumentCodeBoldIcon className={slots.leftIcon()} />
+                    ) : (
+                      <HashBoldIcon className={slots.leftIcon()} />
+                    )}
+                    <div className={slots.itemContent()}>
+                      {!isLvl1 && (
+                        <span className={slots.itemParentTitle()}>{item.hierarchy.lvl1}</span>
+                      )}
+                      <p className={slots.itemTitle()}>{item.content}</p>
+                    </div>
+                  </div>
+                  <ChevronRightLinearIcon size={14} />
+                </Command.Item>
+              );
+            })}
+          </Command.List>
+        </Command>
+      </ModalContent>
+    </Modal>
+  );
+};
--- a/apps/docs/components/docs/components/component-links.tsx
+++ b/apps/docs/components/docs/components/component-links.tsx
@ -29,7 +29,7 @@ export const ComponentLinks = ({
        href={`https://storiesv2.nextui.org/?path=/story/components-${storybook || component}`}
        radius="md"
        size="sm"
-        startIcon={<StorybookIcon className="text-lg text-[#ff4785]" />}
+        startContent={<StorybookIcon className="text-lg text-[#ff4785]" />}
        variant="flat"
      >
        Storybook
@ -41,7 +41,7 @@ export const ComponentLinks = ({
        href={`https://www.npmjs.com/package/@nextui-org/${component}`}
        radius="md"
        size="sm"
-        startIcon={<NpmIcon className="text-2xl text-[#E53E3E]" />}
+        startContent={<NpmIcon className="text-2xl text-[#E53E3E]" />}
        variant="flat"
      >
        {`@nextui-org/${component}`}
@ -54,7 +54,7 @@ export const ComponentLinks = ({
          href={`https://react-spectrum.adobe.com/react-aria/${reactAriaHook}.html`}
          radius="md"
          size="sm"
-          startIcon={<AdobeIcon className="text-lg text-[#E1251B]" />}
+          startContent={<AdobeIcon className="text-lg text-[#E1251B]" />}
          variant="flat"
        >
          React Aria
@ -67,7 +67,7 @@ export const ComponentLinks = ({
        href={`${COMPONENT_PATH}/${component}`}
        radius="md"
        size="sm"
-        startIcon={<GithubIcon />}
+        startContent={<GithubIcon />}
        variant="flat"
      >
        Source
@ -79,7 +79,7 @@ export const ComponentLinks = ({
        href={`${COMPONENT_THEME_PATH}/${styles || component}.ts`}
        radius="md"
        size="sm"
-        startIcon={<GithubIcon />}
+        startContent={<GithubIcon />}
        variant="flat"
      >
        Styles source
--- a/apps/docs/components/icons/bold/document-code.tsx
+++ b/apps/docs/components/icons/bold/document-code.tsx
@ -0,0 +1,19 @@
+import {IconSvgProps} from "@/types";
+
+export const DocumentCodeBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <path
+      d="M16 2H8C4.5 2 3 4 3 7V17C3 20 4.5 22 8 22H16C19.5 22 21 20 21 17V7C21 4 19.5 2 16 2ZM10.53 16.47C10.82 16.76 10.82 17.24 10.53 17.53C10.38 17.68 10.19 17.75 10 17.75C9.81 17.75 9.62 17.68 9.47 17.53L7.47 15.53C7.18 15.24 7.18 14.76 7.47 14.47L9.47 12.47C9.76 12.18 10.24 12.18 10.53 12.47C10.82 12.76 10.82 13.24 10.53 13.53L9.06 15L10.53 16.47ZM16.53 15.53L14.53 17.53C14.38 17.68 14.19 17.75 14 17.75C13.81 17.75 13.62 17.68 13.47 17.53C13.18 17.24 13.18 16.76 13.47 16.47L14.94 15L13.47 13.53C13.18 13.24 13.18 12.76 13.47 12.47C13.76 12.18 14.24 12.18 14.53 12.47L16.53 14.47C16.82 14.76 16.82 15.24 16.53 15.53ZM18.5 9.25H16.5C14.98 9.25 13.75 8.02 13.75 6.5V4.5C13.75 4.09 14.09 3.75 14.5 3.75C14.91 3.75 15.25 4.09 15.25 4.5V6.5C15.25 7.19 15.81 7.75 16.5 7.75H18.5C18.91 7.75 19.25 8.09 19.25 8.5C19.25 8.91 18.91 9.25 18.5 9.25Z"
+      fill="currentColor"
+    />
+  </svg>
+);
--- a/apps/docs/components/icons/bold/hash.tsx
+++ b/apps/docs/components/icons/bold/hash.tsx
@ -0,0 +1,23 @@
+import {IconSvgProps} from "@/types";
+
+export const HashBoldIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <path
+      d="M10.4199 13.4181H13.2599L13.5799 10.5781H10.7399L10.4199 13.4181Z"
+      fill="currentColor"
+    />
+    <path
+      d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM18.82 10.58H15.05L14.73 13.43H18.1C18.5 13.43 18.83 13.76 18.83 14.16C18.83 14.56 18.5 14.89 18.1 14.89H14.57L14.16 18.55C14.12 18.92 13.8 19.2 13.43 19.2C13.4 19.2 13.38 19.2 13.35 19.2C12.95 19.16 12.66 18.79 12.7 18.39L13.09 14.89H10.25L9.84 18.55C9.8 18.92 9.48 19.2 9.11 19.2C9.08 19.2 9.06 19.2 9.03 19.2C8.63 19.16 8.34 18.79 8.38 18.39L8.77 14.89H5.18C4.78 14.89 4.45 14.56 4.45 14.16C4.45 13.76 4.78 13.43 5.18 13.43H8.95L9.27 10.58H5.9C5.5 10.58 5.17 10.25 5.17 9.85C5.17 9.45 5.5 9.12 5.9 9.12H9.43L9.84 5.46C9.88 5.06 10.25 4.77 10.65 4.81C11.05 4.85 11.34 5.22 11.3 5.62L10.91 9.12H13.75L14.16 5.46C14.21 5.06 14.57 4.77 14.97 4.81C15.37 4.85 15.66 5.22 15.62 5.62L15.23 9.12H18.84C19.24 9.12 19.57 9.45 19.57 9.85C19.57 10.25 19.22 10.58 18.82 10.58Z"
+      fill="currentColor"
+    />
+  </svg>
+);
--- a/apps/docs/components/icons/bold/index.ts
+++ b/apps/docs/components/icons/bold/index.ts
@ -11,3 +11,5 @@ export * from "./previous";
 export * from "./repeat-one";
 export * from "./shuffle";
 export * from "./info";
+export * from "./document-code";
+export * from "./hash";
--- a/apps/docs/components/icons/linear/chevron-right.tsx
+++ b/apps/docs/components/icons/linear/chevron-right.tsx
@ -0,0 +1,23 @@
+import {IconSvgProps} from "@/types";
+
+export const ChevronRightLinearIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={height || size}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={width || size}
+    {...props}
+  >
+    <path
+      d="M8.91003 19.9201L15.43 13.4001C16.2 12.6301 16.2 11.3701 15.43 10.6001L8.91003 4.08008"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth="1.5"
+    />
+  </svg>
+);
--- a/apps/docs/components/icons/linear/hash.tsx
+++ b/apps/docs/components/icons/linear/hash.tsx
@ -0,0 +1,43 @@
+import {IconSvgProps} from "@/types";
+
+export const HashLinearIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={height || size}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={width || size}
+    {...props}
+  >
+    <path
+      d="M10 3L8 21"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M16 3L14 21"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M3.5 9H21.5"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M2.5 15H20.5"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+  </svg>
+);
--- a/apps/docs/components/icons/linear/index.ts
+++ b/apps/docs/components/icons/linear/index.ts
@ -15,3 +15,6 @@ export * from "./paperclip";
 export * from "./link-squared";
 export * from "./link";
 export * from "./rotate-right";
+export * from "./hash";
+export * from "./chevron-right";
+export * from "./search";
--- a/apps/docs/components/icons/linear/search.tsx
+++ b/apps/docs/components/icons/linear/search.tsx
@ -0,0 +1,35 @@
+import {IconSvgProps} from "@/types";
+
+export const SearchLinearIcon = ({
+  size = 24,
+  strokeWidth = 1.5,
+  width,
+  height,
+  ...props
+}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={height || size}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={width || size}
+    {...props}
+  >
+    <path
+      d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={strokeWidth}
+    />
+    <path
+      d="M22 22L20 20"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={strokeWidth}
+    />
+  </svg>
+);
--- a/apps/docs/components/marketing/hero/hero.tsx
+++ b/apps/docs/components/marketing/hero/hero.tsx
@ -33,7 +33,7 @@ export const Hero = () => {
            as={NextLink}
            className="w-full md:w-auto"
            color="primary"
-            endIcon={
+            endContent={
              <ArrowRightIcon
                className="group-data-[hover=true]:translate-x-0.5 transition-transform"
                strokeWidth={2}
@ -54,7 +54,7 @@ export const Hero = () => {
            href="https://github.com/nextui-org/nextui"
            radius="full"
            size="lg"
-            startIcon={<GithubIcon />}
+            startContent={<GithubIcon />}
            variant="bordered"
          >
            Github
--- a/apps/docs/components/marketing/install-banner.tsx
+++ b/apps/docs/components/marketing/install-banner.tsx
@ -56,7 +56,7 @@ export const InstallBanner = () => {
              as={NextLink}
              className="text-sm"
              color="secondary"
-              endIcon={
+              endContent={
                <ArrowRightIcon
                  className="group-data-[hover=true]:translate-x-0.5 transition-transform"
                  strokeWidth={2}
@ -75,7 +75,7 @@ export const InstallBanner = () => {
              href="https://github.com/nextui-org/nextui"
              radius="full"
              size="md"
-              startIcon={<GithubIcon />}
+              startContent={<GithubIcon />}
              variant="bordered"
            >
              Github
--- a/apps/docs/components/navbar.tsx
+++ b/apps/docs/components/navbar.tsx
@ -9,7 +9,6 @@ import {
  NavbarMenuToggle,
  NavbarBrand,
  NavbarItem,
-  Input,
  Link,
  Button,
  Kbd,
@ -23,16 +22,22 @@ import {clsx} from "@nextui-org/shared-utils";
 import NextLink from "next/link";
 import {usePathname} from "next/navigation";
 import {includes} from "lodash";
-import {SearchIcon} from "@nextui-org/shared-icons";
 import {motion, AnimatePresence} from "framer-motion";
 import {useEffect} from "react";

 import {siteConfig} from "@/config/site";
 import {Route} from "@/libs/docs/page";
 import {LargeLogo, SmallLogo, ThemeSwitch} from "@/components";
-import {TwitterIcon, GithubIcon, DiscordIcon, HeartFilledIcon} from "@/components/icons";
+import {
+  TwitterIcon,
+  GithubIcon,
+  DiscordIcon,
+  HeartFilledIcon,
+  SearchLinearIcon,
+} from "@/components/icons";
 import {useIsMounted} from "@/hooks/use-is-mounted";
 import {DocsSidebar} from "@/components/docs/sidebar";
+import {useCmdkStore} from "@/components/cmdk";

 export interface NavbarProps {
  routes: Route[];
@ -49,6 +54,8 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {

  const pathname = usePathname();

+  const cmkdStore = useCmdkStore();
+
  useEffect(() => {
    if (isMenuOpen) {
      setIsMenuOpen(false);
@ -61,24 +68,26 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
    "/docs/guide/upgrade-to-v2",
  ];

-  const searchInput = (
-    <Input
-      aria-label="Search"
-      classNames={{
-        inputWrapper: "bg-default-400/20 dark:bg-default-500/20",
-        input: "text-sm",
-      }}
+  const searchButton = (
+    <Button
+      aria-label="Quick search"
+      className="text-sm font-normal text-default-600 bg-default-400/20 dark:bg-default-500/20"
      endContent={
        <Kbd className="hidden py-0.5 px-2 lg:inline-block" keys={["command"]}>
          K
        </Kbd>
      }
-      labelPlacement="outside"
-      placeholder="Search..."
      startContent={
-        <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
+        <SearchLinearIcon
+          className="text-base text-default-400 pointer-events-none flex-shrink-0"
+          size={18}
+          strokeWidth={2}
+        />
      }
-    />
+      onPress={() => cmkdStore.onOpen()}
+    >
+      Quick Search...
+    </Button>
  );

  return (
@ -105,8 +114,8 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
                  <motion.div animate={{opacity: 1}} exit={{opacity: 0}} initial={{opacity: 0}}>
                    <DropdownTrigger>
                      <Button
-                        className="hidden w-[65px] sm:flex gap-0.5 bg-default-400/20 dark:bg-default-500/20"
-                        endIcon={<ChevronDownIcon className="text-xs" />}
+                        className="hidden min-w-fit max-w-[64px] sm:flex gap-0.5 bg-default-400/20 dark:bg-default-500/20"
+                        endContent={<ChevronDownIcon className="text-xs" />}
                        radius="full"
                        size="xs"
                        variant="flat"
@ -129,7 +138,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
              </DropdownMenu>
            </Dropdown>
          ) : (
-            <div className="w-[80px]" />
+            <div className="w-[64px]" />
          )}
        </NavbarBrand>
        <ul className="hidden lg:flex gap-4 justify-start">
@ -184,6 +193,18 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
        <NavbarItem className="flex items-center">
          <ThemeSwitch />
        </NavbarItem>
+        <NavbarItem className="flex items-center">
+          <Button
+            isIconOnly
+            className="p-0"
+            radius="full"
+            size="xs"
+            variant="light"
+            onPress={() => cmkdStore.onOpen()}
+          >
+            <SearchLinearIcon className="text-default-600 dark:text-default-500 mt-px" size={20} />
+          </Button>
+        </NavbarItem>
        <NavbarMenuToggle aria-label={isMenuOpen ? "Close menu" : "Open menu"} />
      </NavbarContent>

@ -200,14 +221,14 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
          </Link>
          <ThemeSwitch />
        </NavbarItem>
-        <NavbarItem className="hidden lg:flex">{searchInput}</NavbarItem>
+        <NavbarItem className="hidden lg:flex">{searchButton}</NavbarItem>
        <NavbarItem className="hidden md:flex">
          <Button
            isExternal
            as={Link}
            className="group text-sm font-normal text-default-600 bg-default-400/20 dark:bg-default-500/20"
            href={siteConfig.links.sponsor}
-            startIcon={
+            startContent={
              <HeartFilledIcon className="text-danger group-data-[hover=true]:animate-heartbeat" />
            }
            variant="flat"
@ -222,7 +243,6 @@ export const Navbar: FC<NavbarProps> = ({children, routes, slug, tag}) => {
      </NavbarContent>

      <NavbarMenu>
-        {searchInput}
        <DocsSidebar className="mt-4" routes={routes} slug={slug} tag={tag} />
        {children}
      </NavbarMenu>
--- a/apps/docs/content/components/button/custom-impl.ts
+++ b/apps/docs/content/components/button/custom-impl.ts
@ -11,8 +11,8 @@ const MyButton = forwardRef((props, ref) => {
    spinnerSize,
    spinner = <Spinner color="current" size={spinnerSize} />,
    spinnerPlacement,
-    startIcon,
-    endIcon,
+    startContent,
+    endContent,
    isLoading,
    disableRipple,
    getButtonProps,
@ -23,11 +23,11 @@ const MyButton = forwardRef((props, ref) => {

  return (
    <button ref={domRef} className={classNames} {...getButtonProps()}>
-      {startIcon}
+      {startContent}
      {isLoading && spinnerPlacement === "start" && spinner}
      {children}
      {isLoading && spinnerPlacement === "end" && spinner}
-      {endIcon}
+      {endContent}
      {!disableRipple && <Drip drips={drips} />}
    </button>
  );
@ -52,8 +52,8 @@ const MyButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
    spinnerSize,
    spinner = <Spinner color="current" size={spinnerSize} />,
    spinnerPlacement,
-    startIcon,
-    endIcon,
+    startContent,
+    endContent,
    isLoading,
    disableRipple,
    getButtonProps,
@ -64,11 +64,11 @@ const MyButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {

  return (
    <button ref={domRef} className={classNames} {...getButtonProps()}>
-      {startIcon}
+      {startContent}
      {isLoading && spinnerPlacement === "start" && spinner}
      {children}
      {isLoading && spinnerPlacement === "end" && spinner}
-      {endIcon}
+      {endContent}
      {!disableRipple && <Drip drips={drips} />}
    </button>
  );
--- a/apps/docs/content/components/button/icons.ts
+++ b/apps/docs/content/components/button/icons.ts
@ -72,10 +72,10 @@ import {CameraIcon} from './CameraIcon';
 export default function App() {
  return (
    <div className="flex gap-4 items-center">
-      <Button color="success" endIcon={<CameraIcon/>}>
+      <Button color="success" endContent={<CameraIcon/>}>
        Take a photo
      </Button>    
-      <Button color="danger" variant="bordered" startIcon={<UserIcon/>}>
+      <Button color="danger" variant="bordered" startContent={<UserIcon/>}>
        Delete user
      </Button>
    </div>
--- a/apps/docs/content/docs/components/button.mdx
+++ b/apps/docs/content/docs/components/button.mdx
@ -62,7 +62,7 @@ You can also customize the loading spinner by passing the a custom component to

 ### With Icons

-You can add icons to the `Button` by passing the `startIcon` or `endIcon` props.
+You can add icons to the `Button` by passing the `startContent` or `endContent` props.

 <CodeDemo title="With Icons" files={buttonContent.icons} />

@ -149,8 +149,8 @@ building buttons that work well across devices and interaction methods.
 | size             | `xs` \| `sm` \| `md` \| `lg` \| `xl`                                         | The button size.                                             | `md`      |
 | color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`  | The button color theme.                                      | `default` |
 | radius           | `none` \| `base` \| `sm` \| `md` \| `lg` \| `xl` \| `2xl` \| `3xl` \| `full` | The button border radius.                                    | `xl`      |
-| startIcon        | `ReactNode`                                                                  | The button start content.                                    | -         |
-| endIcon          | `ReactNode`                                                                  | The button end content.                                      | -         |
+| startContent     | `ReactNode`                                                                  | The button start content.                                    | -         |
+| endContent       | `ReactNode`                                                                  | The button end content.                                      | -         |
 | spinner          | `ReactNode`                                                                  | Spinner to display when loading.                             | -         |
 | spinnerPlacement | `start` \| `end`                                                             | The spinner placement.                                       | `start`   |
 | fullWidth        | `boolean`                                                                    | Whether the button should take the full width of its parent. | `false`   |
--- a/apps/docs/content/docs/components/modal.mdx
+++ b/apps/docs/content/docs/components/modal.mdx
@ -152,7 +152,7 @@ You can customize the `Modal` component by passing custom Tailwind CSS classes t
 | defaultOpen               | `boolean`                                                                                           | Whether the modal is open by default (uncontrolled).                                                  | -               |
 | isDismissable             | `boolean`                                                                                           | Whether the modal can be closed by clicking on the overlay or pressing the <Kbd>Esc</Kbd> key.        | `true`          |
 | isKeyboardDismissDisabled | `boolean`                                                                                           | Whether pressing the <Kbd>Esc</Kbd> key to close the modal should be disabled.                        | `false`         |
-| showCloseButton           | `boolean`                                                                                           | Whether the modal should display a close button.                                                      | `true`          |
+| hideCloseButton           | `boolean`                                                                                           | Whether to hide the modal close button.                                                               | `false`         |
 | closeButton               | `ReactNode`                                                                                         | Custom close button to display on top right corner.                                                   | -               |
 | motionProps               | [MotionProps](#motion-props)                                                                        | The props to modify the framer motion animation. Use the `variants` API to create your own animation. |                 |
 | portalContainer           | `HTMLElement`                                                                                       | The container element in which the overlay portal will be placed.                                     | `document.body` |
--- a/apps/docs/content/docs/search-meta.json
+++ b/apps/docs/content/docs/search-meta.json
--- a/apps/docs/hooks/use-update-effect.ts
+++ b/apps/docs/hooks/use-update-effect.ts
@ -0,0 +1,29 @@
+import {useEffect, useRef} from "react";
+
+/**
+ * React effect hook that invokes only on update.
+ * It doesn't invoke on mount
+ */
+export const useUpdateEffect: typeof useEffect = (effect, deps) => {
+  const renderCycleRef = useRef(false);
+  const effectCycleRef = useRef(false);
+
+  useEffect(() => {
+    const isMounted = renderCycleRef.current;
+    const shouldRun = isMounted && effectCycleRef.current;
+
+    if (shouldRun) {
+      return effect();
+    }
+    effectCycleRef.current = true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  useEffect(() => {
+    renderCycleRef.current = true;
+
+    return () => {
+      renderCycleRef.current = false;
+    };
+  }, []);
+};
--- a/apps/docs/layouts/docs.tsx
+++ b/apps/docs/layouts/docs.tsx
@ -68,31 +68,8 @@ export const DocsLayout: FC<DocsLayoutProps> = ({
          )}
        </div>
      </main>
+
      <Footer align="right" />
-
-      {/* <div
-        aria-hidden="true"
-        className="fixed hidden dark:md:block dark:opacity-70 -bottom-[40%] -left-[20%] z-[-10]"
-      >
-        <Image
-          removeWrapper
-          alt="docs left background"
-          className="z-[-10]"
-          src="/gradients/docs-left.svg"
-        />
-      </div>
-
-      <div
-        aria-hidden="true"
-        className="fixed hidden dark:md:block dark:opacity-70 -top-[80%] -right-[60%] 2xl:-top-[60%] 2xl:-right-[45%] z-[-10] rotate-12"
-      >
-        <Image
-          removeWrapper
-          alt="docs right background"
-          className="z-[-10]"
-          src="/gradients/docs-right.svg"
-        />
-      </div> */}
    </div>
  );
 };
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@ -33,11 +33,13 @@
    "@react-stately/tree": "^3.6.1",
    "@vercel/analytics": "^1.0.1",
    "canvas-confetti": "^1.4.0",
+    "cmdk": "^0.2.0",
    "color2k": "^2.0.2",
    "framer-motion": "^10.12.16",
    "gray-matter": "^4.0.3",
    "hast-util-to-html": "7.1.2",
    "lodash": "^4.17.21",
+    "match-sorter": "^6.3.1",
    "mini-svg-data-uri": "^1.4.3",
    "mitt": "3.0.0",
    "next": "13.4.7-canary.1",
@ -50,6 +52,7 @@
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-live": "^2.3.0",
+    "react-multi-ref": "^1.0.1",
    "refractor": "3.3.1",
    "rehype": "11.0.0",
    "rehype-parse": "7.0.1",
@ -61,9 +64,11 @@
    "shelljs": "^0.8.4",
    "tailwind-scrollbar-hide": "^1.1.7",
    "tailwind-variants": "^0.1.8",
-    "unified": "^9.2.2"
+    "unified": "^9.2.2",
+    "zustand": "^4.3.8"
  },
  "devDependencies": {
+    "@docusaurus/utils": "2.0.0-beta.3",
    "@next/bundle-analyzer": "^13.4.6",
    "@next/env": "^13.4.2",
    "@react-types/shared": "^3.18.0",
@ -77,20 +82,19 @@
    "@types/react-dom": "18.2.4",
    "@types/refractor": "^3.0.2",
    "@types/shelljs": "^0.8.9",
-    "@docusaurus/utils": "2.0.0-beta.3",
    "@types/uuid": "^8.3.1",
-    "uuid": "^8.3.2",
+    "algoliasearch": "^4.10.3",
    "autoprefixer": "^10.4.14",
    "dotenv": "^16.0.1",
-    "prettier": "^2.7.1",
-    "markdown-toc": "^1.2.0",
-    "algoliasearch": "^4.10.3",
    "eslint-config-next": "^11.0.0",
+    "markdown-toc": "^1.2.0",
    "next-sitemap": "^4.0.7",
    "node-fetch": "^3.2.10",
    "postcss": "^8.4.21",
+    "prettier": "^2.7.1",
    "tailwindcss": "^3.2.7",
    "tsx": "^3.8.2",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "uuid": "^8.3.2"
  }
 }
--- a/apps/docs/public/gradients/docs-left.png
+++ b/apps/docs/public/gradients/docs-left.png
--- a/apps/docs/public/gradients/docs-right.png
+++ b/apps/docs/public/gradients/docs-right.png
--- a/apps/docs/scripts/update-search-meta.ts
+++ b/apps/docs/scripts/update-search-meta.ts
@ -36,16 +36,24 @@ interface TOCResultItem {
  seen: number
 }

+const getUrl = (slug: string) => {
+  const url = removePrefix(slug, "/")
+
+
+  return `/docs${url}`
+}
+
 async function getMDXMeta(file: string) {
  const {content, frontMatter: _frontMatter} = await parseMarkdownFile(file);

  const frontMatter = _frontMatter as Record<string, any>
  const tableOfContent = toc(content);
  const json = tableOfContent.json as TOCResultItem[]
-  const slug = fileToPath(file)
+  let slug = fileToPath(file)
    .replace(`/${docsRootFolder}`, "")
    .replace(process.cwd(), "");

+
  const result:ResultType[] = [];
  const title = !!frontMatter.title ? frontMatter.title : "";

@ -53,18 +61,18 @@ async function getMDXMeta(file: string) {
    content: title,
    objectID: uuid(),
    type: "lvl1",
-    url: removePrefix(slug, "/"),
+    url: getUrl(slug),
    hierarchy: {
      lvl1: title,
    },
  });

  json.forEach((item, index) => {
-    result.push({
+    item.content !== title && result.push({
      content: item.content,
      objectID: uuid(),
      type: `lvl${item.lvl}`,
-      url: removePrefix(slug, "/") + `#${item.slug}`,
+      url: getUrl(slug) + `#${item.slug}`,
      hierarchy: {
        lvl1: title,
        lvl2: item.lvl === 2 ? item.content : json[index - 1]?.content ?? null,
@ -78,16 +86,9 @@ async function getMDXMeta(file: string) {

 async function getSearchMeta(saveMode: "algolia" | "local" = "local") {
  dotenv.config();
-  // Initialize Algolia client
-  const client = algoliasearch(
-    process.env.ALGOLIA_APP_ID || "",
-    process.env.ALGOLIA_ADMIN_API_KEY || "",
-  );

  try {
-    const tmpIndex = await client.initIndex("prod_docs_tmp");
-    const mainIndex = await client.initIndex("prod_docs");
-
+  
    let json: any = [];

    const files = shell
@ -128,7 +129,14 @@ async function getSearchMeta(saveMode: "algolia" | "local" = "local") {
      return;
    }

+    // Initialize Algolia client
+    const client = algoliasearch(
+      process.env.ALGOLIA_APP_ID || "",
+      process.env.ALGOLIA_ADMIN_API_KEY || "",
+    );
  
+    const tmpIndex = await client.initIndex("prod_docs_tmp");
+    const mainIndex = await client.initIndex("prod_docs");

    // Get settings of main index and set them to the temp index
    const indexSettings = await mainIndex.getSettings();
--- a/packages/components/accordion/CHANGELOG.md
+++ b/packages/components/accordion/CHANGELOG.md
@ -1,5 +1,20 @@
 # @nextui-org/accordion

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230618174149
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/accordion/package.json
+++ b/packages/components/accordion/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/accordion",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
  "keywords": [
    "react",
--- a/packages/components/avatar/CHANGELOG.md
+++ b/packages/components/avatar/CHANGELOG.md
@ -1,5 +1,17 @@
 # @nextui-org/avatar

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-image@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/avatar/package.json
+++ b/packages/components/avatar/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/avatar",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
  "keywords": [
    "avatar"
--- a/packages/components/badge/CHANGELOG.md
+++ b/packages/components/badge/CHANGELOG.md
@ -1,5 +1,16 @@
 # @nextui-org/badge

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/badge/package.json
+++ b/packages/components/badge/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/badge",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "Badges are used as a small numerical value or status descriptor for UI elements.",
  "keywords": [
    "badge"
--- a/packages/components/button/CHANGELOG.md
+++ b/packages/components/button/CHANGELOG.md
@ -1,5 +1,19 @@
 # @nextui-org/button

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/spinner@0.0.0-dev-v2-20230618174149
+  - @nextui-org/drip@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/button/tests/button.test.tsx
+++ b/packages/components/button/tests/button.test.tsx
@ -41,7 +41,7 @@ describe("Button", () => {

  it("should renders with start icon", () => {
    const wrapper = render(
-      <Button startIcon={<span data-testid="start-icon">Icon</span>}>Button</Button>,
+      <Button startContent={<span data-testid="start-icon">Icon</span>}>Button</Button>,
    );

    expect(wrapper.getByTestId("start-icon")).toBeInTheDocument();
@ -49,7 +49,7 @@ describe("Button", () => {

  it("should renders with end icon", () => {
    const wrapper = render(
-      <Button endIcon={<span data-testid="end-icon">Icon</span>}>Button</Button>,
+      <Button endContent={<span data-testid="end-icon">Icon</span>}>Button</Button>,
    );

    expect(wrapper.getByTestId("end-icon")).toBeInTheDocument();
--- a/packages/components/button/package.json
+++ b/packages/components/button/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/button",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "Buttons allow users to perform actions and choose with a single tap.",
  "keywords": [
    "button"
--- a/packages/components/button/src/button.tsx
+++ b/packages/components/button/src/button.tsx
@ -16,8 +16,8 @@ const Button = forwardRef<ButtonProps, "button">((props, ref) => {
    spinnerSize,
    spinner = <Spinner color="current" size={spinnerSize} />,
    spinnerPlacement,
-    startIcon,
-    endIcon,
+    startContent,
+    endContent,
    isLoading,
    disableRipple,
    getButtonProps,
@ -28,11 +28,11 @@ const Button = forwardRef<ButtonProps, "button">((props, ref) => {

  return (
    <Component ref={domRef} className={styles} {...getButtonProps()}>
-      {startIcon}
+      {startContent}
      {isLoading && spinnerPlacement === "start" && spinner}
      {children}
      {isLoading && spinnerPlacement === "end" && spinner}
-      {endIcon}
+      {endContent}
      {!disableRipple && <Drip drips={drips} />}
    </Component>
  );
--- a/packages/components/button/src/use-button.ts
+++ b/packages/components/button/src/use-button.ts
@ -33,11 +33,11 @@ export interface UseButtonProps
  /**
   * The button start content.
   */
-  startIcon?: ReactNode;
+  startContent?: ReactNode;
  /**
   * The button end content.
   */
-  endIcon?: ReactNode;
+  endContent?: ReactNode;
  /**
   * Spinner to display when loading.
   * @see https://nextui.org/components/spinner
@ -63,8 +63,8 @@ export function useButton(props: UseButtonProps) {
    ref,
    as,
    children,
-    startIcon: startIconProp,
-    endIcon: endIconProp,
+    startContent: startContentProp,
+    endContent: endContentProp,
    autoFocus,
    className,
    spinner,
@ -182,8 +182,8 @@ export function useButton(props: UseButtonProps) {
        })
      : null;

-  const startIcon = getIconClone(startIconProp);
-  const endIcon = getIconClone(endIconProp);
+  const startContent = getIconClone(startContentProp);
+  const endContent = getIconClone(endContentProp);

  const spinnerSize = useMemo(() => {
    const buttonSpinnerSizeMap: Record<string, SpinnerProps["size"]> = {
@ -204,8 +204,8 @@ export function useButton(props: UseButtonProps) {
    drips,
    spinner,
    styles,
-    startIcon,
-    endIcon,
+    startContent,
+    endContent,
    isLoading,
    spinnerPlacement,
    spinnerSize,
--- a/packages/components/button/stories/button.stories.tsx
+++ b/packages/components/button/stories/button.stories.tsx
@ -109,8 +109,8 @@ DisableRipple.args = {
 export const WithIcons = Template.bind({});
 WithIcons.args = {
  ...defaultProps,
-  startIcon: <Notification className="fill-current" />,
-  endIcon: <Camera className="fill-current" />,
+  startContent: <Notification className="fill-current" />,
+  endContent: <Camera className="fill-current" />,
 };

 export const IconButton = Template.bind({});
--- a/packages/components/card/CHANGELOG.md
+++ b/packages/components/card/CHANGELOG.md
@ -1,5 +1,18 @@
 # @nextui-org/card

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/drip@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/card/package.json
+++ b/packages/components/card/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/card",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "Card is a container for text, photos, and actions in the context of a single subject.",
  "keywords": [
    "card"
--- a/packages/components/checkbox/CHANGELOG.md
+++ b/packages/components/checkbox/CHANGELOG.md
@ -1,5 +1,16 @@
 # @nextui-org/checkbox

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/checkbox/package.json
+++ b/packages/components/checkbox/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/checkbox",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
  "keywords": [
    "checkbox"
--- a/packages/components/chip/CHANGELOG.md
+++ b/packages/components/chip/CHANGELOG.md
@ -1,5 +1,17 @@
 # @nextui-org/chip

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/chip/package.json
+++ b/packages/components/chip/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/chip",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "Chips help people enter information, make selections, filter content, or trigger actions.",
  "keywords": [
    "chip"
--- a/packages/components/code/CHANGELOG.md
+++ b/packages/components/code/CHANGELOG.md
@ -1,5 +1,16 @@
 # @nextui-org/code

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/code/package.json
+++ b/packages/components/code/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/code",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "Code is a component used to display inline code.",
  "keywords": [
    "code"
--- a/packages/components/divider/CHANGELOG.md
+++ b/packages/components/divider/CHANGELOG.md
@ -1,5 +1,16 @@
 # @nextui-org/divider

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/divider/package.json
+++ b/packages/components/divider/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/divider",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": ". A separator is a visual divider between two groups of content",
  "keywords": [
    "divider"
--- a/packages/components/drip/CHANGELOG.md
+++ b/packages/components/drip/CHANGELOG.md
@ -1,5 +1,15 @@
 # @nextui-org/drip

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/drip/package.json
+++ b/packages/components/drip/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/drip",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "A ripple effect for ensuring that the user fells the system is reacting instantaneously",
  "keywords": [
    "drip"
--- a/packages/components/dropdown/CHANGELOG.md
+++ b/packages/components/dropdown/CHANGELOG.md
@ -1,5 +1,19 @@
 # @nextui-org/dropdown

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-is-mobile@0.0.0-dev-v2-20230618174149
+  - @nextui-org/popover@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/dropdown/package.json
+++ b/packages/components/dropdown/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/dropdown",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "A dropdown displays a list of actions or options that a user can choose.",
  "keywords": [
    "dropdown"
--- a/packages/components/image/CHANGELOG.md
+++ b/packages/components/image/CHANGELOG.md
@ -1,5 +1,17 @@
 # @nextui-org/image

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-image@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/image/package.json
+++ b/packages/components/image/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/image",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "A simple image component",
  "keywords": [
    "image"
--- a/packages/components/input/CHANGELOG.md
+++ b/packages/components/input/CHANGELOG.md
@ -1,5 +1,18 @@
 # @nextui-org/input

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-aria-field@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/input/package.json
+++ b/packages/components/input/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/input",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "The input component is designed for capturing user input within a text field.",
  "keywords": [
    "input"
--- a/packages/components/kbd/CHANGELOG.md
+++ b/packages/components/kbd/CHANGELOG.md
@ -1,5 +1,16 @@
 # @nextui-org/kbd

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/kbd/package.json
+++ b/packages/components/kbd/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/kbd",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "The keyboard key components indicates which key or set of keys used to execute a specificv  action",
  "keywords": [
    "kbd"
--- a/packages/components/link/CHANGELOG.md
+++ b/packages/components/link/CHANGELOG.md
@ -1,5 +1,17 @@
 # @nextui-org/link

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/link/package.json
+++ b/packages/components/link/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/link",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an &lt;a&gt;",
  "keywords": [
    "link"
--- a/packages/components/modal/CHANGELOG.md
+++ b/packages/components/modal/CHANGELOG.md
@ -1,5 +1,21 @@
 # @nextui-org/modal

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/use-aria-modal-overlay@0.0.0-dev-v2-20230618174149
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-disclosure@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/modal/package.json
+++ b/packages/components/modal/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/modal",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "Displays a dialog with a custom content that requires attention or provides additional information.",
  "keywords": [
    "modal"
--- a/packages/components/modal/src/modal-content.tsx
+++ b/packages/components/modal/src/modal-content.tsx
@ -28,7 +28,7 @@ const ModalContent = forwardRef<ModalContentProps, "section">((props, _) => {
    motionProps,
    backdrop,
    closeButton,
-    showCloseButton,
+    hideCloseButton,
    disableAnimation,
    getDialogProps,
    getBackdropProps,
@ -57,7 +57,7 @@ const ModalContent = forwardRef<ModalContentProps, "section">((props, _) => {
    <>
      <DismissButton onDismiss={onClose} />
      <Component {...getDialogProps(mergeProps(dialogProps, otherProps))}>
-        {showCloseButton && closeButtonContent}
+        {!hideCloseButton && closeButtonContent}
        {typeof children === "function" ? children(onClose) : children}
      </Component>
      <DismissButton onDismiss={onClose} />
--- a/packages/components/modal/src/use-modal.ts
+++ b/packages/components/modal/src/use-modal.ts
@ -25,10 +25,10 @@ interface Props extends HTMLNextUIProps<"section"> {
   */
  motionProps?: HTMLMotionProps<"section">;
  /**
-   * Determines if the modal should have a close button in the top right corner.
-   * @default true
+   * Determines whether to hide the modal close button.
+   * @default false
   */
-  showCloseButton?: boolean;
+  hideCloseButton?: boolean;
  /**
   * Custom modal close button element.
   */
@ -84,7 +84,7 @@ export function useModal(originalProps: UseModalProps) {
    motionProps,
    closeButton,
    isDismissable = true,
-    showCloseButton = true,
+    hideCloseButton = false,
    portalContainer,
    isKeyboardDismissDisabled = false,
    onClose,
@ -188,7 +188,7 @@ export function useModal(originalProps: UseModalProps) {
    classNames,
    isDismissable,
    closeButton,
-    showCloseButton,
+    hideCloseButton,
    portalContainer,
    backdrop: originalProps.backdrop ?? "opaque",
    isOpen: state.isOpen,
--- a/packages/components/navbar/CHANGELOG.md
+++ b/packages/components/navbar/CHANGELOG.md
@ -1,5 +1,19 @@
 # @nextui-org/navbar

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/use-aria-toggle-button@0.0.0-dev-v2-20230618174149
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-scroll-position@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/navbar/package.json
+++ b/packages/components/navbar/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/navbar",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
  "keywords": [
    "navbar"
--- a/packages/components/navbar/stories/navbar.stories.tsx
+++ b/packages/components/navbar/stories/navbar.stories.tsx
@ -237,7 +237,7 @@ const WithDropdownTemplate: ComponentStory<typeof Navbar> = (args: NavbarProps)
          <Dropdown>
            <NavbarItem>
              <DropdownTrigger>
-                <Button endIcon={icons.chevron} radius="full" variant="light">
+                <Button endContent={icons.chevron} radius="full" variant="light">
                  Features
                </Button>
              </DropdownTrigger>
--- a/packages/components/pagination/CHANGELOG.md
+++ b/packages/components/pagination/CHANGELOG.md
@ -1,5 +1,18 @@
 # @nextui-org/pagination

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-pagination@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/pagination/package.json
+++ b/packages/components/pagination/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/pagination",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "The Pagination component allows you to display active page and navigate between multiple pages.",
  "keywords": [
    "pagination"
--- a/packages/components/popover/CHANGELOG.md
+++ b/packages/components/popover/CHANGELOG.md
@ -1,5 +1,20 @@
 # @nextui-org/popover

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-aria-button@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/button@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/popover/package.json
+++ b/packages/components/popover/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/popover",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "A popover is an overlay element positioned relative to a trigger.",
  "keywords": [
    "popover"
--- a/packages/components/progress/CHANGELOG.md
+++ b/packages/components/progress/CHANGELOG.md
@ -1,5 +1,18 @@
 # @nextui-org/progress

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-aria-label@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-is-mounted@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/progress/package.json
+++ b/packages/components/progress/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/progress",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
  "keywords": [
    "progress"
--- a/packages/components/radio/CHANGELOG.md
+++ b/packages/components/radio/CHANGELOG.md
@ -1,5 +1,16 @@
 # @nextui-org/radio

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/radio/package.json
+++ b/packages/components/radio/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/radio",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "Radios allow users to select a single option from a list of mutually exclusive options.",
  "keywords": [
    "radio"
--- a/packages/components/skeleton/CHANGELOG.md
+++ b/packages/components/skeleton/CHANGELOG.md
@ -1,5 +1,16 @@
 # @nextui-org/skeleton

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/skeleton/package.json
+++ b/packages/components/skeleton/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/skeleton",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "Skeleton is used to display the loading state of some component.",
  "keywords": [
    "skeleton"
--- a/packages/components/snippet/CHANGELOG.md
+++ b/packages/components/snippet/CHANGELOG.md
@ -1,5 +1,20 @@
 # @nextui-org/snippet

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-clipboard@0.0.0-dev-v2-20230618174149
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230618174149
+  - @nextui-org/button@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/snippet/package.json
+++ b/packages/components/snippet/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/snippet",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "Display a snippet of copyable code for the command line.",
  "keywords": [
    "snippet"
--- a/packages/components/spacer/CHANGELOG.md
+++ b/packages/components/spacer/CHANGELOG.md
@ -1,5 +1,16 @@
 # @nextui-org/spacer

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/spacer/package.json
+++ b/packages/components/spacer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/spacer",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "A flexible spacer component designed to create consistent spacing and maintain alignment in your layout.",
  "keywords": [
    "spacer"
--- a/packages/components/spinner/CHANGELOG.md
+++ b/packages/components/spinner/CHANGELOG.md
@ -1,5 +1,16 @@
 # @nextui-org/spinner

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/spinner/package.json
+++ b/packages/components/spinner/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/spinner",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "Loaders express an unspecified wait time or display the length of a process.",
  "keywords": [
    "loading",
--- a/packages/components/switch/CHANGELOG.md
+++ b/packages/components/switch/CHANGELOG.md
@ -1,5 +1,16 @@
 # @nextui-org/switch

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/switch/package.json
+++ b/packages/components/switch/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/switch",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
  "keywords": [
    "switch"
--- a/packages/components/table/CHANGELOG.md
+++ b/packages/components/table/CHANGELOG.md
@ -1,5 +1,19 @@
 # @nextui-org/table

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-icons@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/checkbox@0.0.0-dev-v2-20230618174149
+  - @nextui-org/spacer@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/table/package.json
+++ b/packages/components/table/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/table",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "Tables are used to display tabular data using rows and columns. ",
  "keywords": [
    "table"
--- a/packages/components/tabs/CHANGELOG.md
+++ b/packages/components/tabs/CHANGELOG.md
@ -1,5 +1,19 @@
 # @nextui-org/tabs

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/use-is-mounted@0.0.0-dev-v2-20230618174149
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/tabs/package.json
+++ b/packages/components/tabs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/tabs",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "Tabs organize content into multiple sections and allow users to navigate between them.",
  "keywords": [
    "tabs"
--- a/packages/components/tooltip/CHANGELOG.md
+++ b/packages/components/tooltip/CHANGELOG.md
@ -1,5 +1,18 @@
 # @nextui-org/tooltip

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/framer-transitions@0.0.0-dev-v2-20230618174149
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/aria-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/tooltip/package.json
+++ b/packages/components/tooltip/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/tooltip",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "A React Component for rendering dynamically positioned Tooltips",
  "keywords": [
    "tooltip"
--- a/packages/components/user/CHANGELOG.md
+++ b/packages/components/user/CHANGELOG.md
@ -1,5 +1,17 @@
 # @nextui-org/user

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/shared-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/react-utils@0.0.0-dev-v2-20230618174149
+  - @nextui-org/avatar@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/components/user/package.json
+++ b/packages/components/user/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/user",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "Flexible User Profile Component.",
  "keywords": [
    "user"
--- a/packages/core/react/CHANGELOG.md
+++ b/packages/core/react/CHANGELOG.md
@ -1,5 +1,44 @@
 # @nextui-org/react

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+- Updated dependencies
+  - @nextui-org/pagination@0.0.0-dev-v2-20230618174149
+  - @nextui-org/accordion@0.0.0-dev-v2-20230618174149
+  - @nextui-org/checkbox@0.0.0-dev-v2-20230618174149
+  - @nextui-org/dropdown@0.0.0-dev-v2-20230618174149
+  - @nextui-org/progress@0.0.0-dev-v2-20230618174149
+  - @nextui-org/skeleton@0.0.0-dev-v2-20230618174149
+  - @nextui-org/divider@0.0.0-dev-v2-20230618174149
+  - @nextui-org/popover@0.0.0-dev-v2-20230618174149
+  - @nextui-org/snippet@0.0.0-dev-v2-20230618174149
+  - @nextui-org/spinner@0.0.0-dev-v2-20230618174149
+  - @nextui-org/tooltip@0.0.0-dev-v2-20230618174149
+  - @nextui-org/avatar@0.0.0-dev-v2-20230618174149
+  - @nextui-org/button@0.0.0-dev-v2-20230618174149
+  - @nextui-org/navbar@0.0.0-dev-v2-20230618174149
+  - @nextui-org/spacer@0.0.0-dev-v2-20230618174149
+  - @nextui-org/switch@0.0.0-dev-v2-20230618174149
+  - @nextui-org/badge@0.0.0-dev-v2-20230618174149
+  - @nextui-org/image@0.0.0-dev-v2-20230618174149
+  - @nextui-org/input@0.0.0-dev-v2-20230618174149
+  - @nextui-org/modal@0.0.0-dev-v2-20230618174149
+  - @nextui-org/radio@0.0.0-dev-v2-20230618174149
+  - @nextui-org/table@0.0.0-dev-v2-20230618174149
+  - @nextui-org/card@0.0.0-dev-v2-20230618174149
+  - @nextui-org/chip@0.0.0-dev-v2-20230618174149
+  - @nextui-org/code@0.0.0-dev-v2-20230618174149
+  - @nextui-org/drip@0.0.0-dev-v2-20230618174149
+  - @nextui-org/link@0.0.0-dev-v2-20230618174149
+  - @nextui-org/tabs@0.0.0-dev-v2-20230618174149
+  - @nextui-org/user@0.0.0-dev-v2-20230618174149
+  - @nextui-org/kbd@0.0.0-dev-v2-20230618174149
+  - @nextui-org/system@0.0.0-dev-v2-20230618174149
+  - @nextui-org/theme@0.0.0-dev-v2-20230618174149
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/core/react/package.json
+++ b/packages/core/react/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/react",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "🚀 Beautiful and modern React UI library.",
  "author": "Junior Garcia <jrgarciadev@gmail.com>",
  "homepage": "https://nextui.org",
--- a/packages/core/system/CHANGELOG.md
+++ b/packages/core/system/CHANGELOG.md
@ -1,5 +1,11 @@
 # @nextui-org/system

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/core/system/package.json
+++ b/packages/core/system/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/system",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "NextUI system primitives",
  "keywords": [
    "system"
--- a/packages/core/theme/CHANGELOG.md
+++ b/packages/core/theme/CHANGELOG.md
@ -1,5 +1,11 @@
 # @nextui-org/theme

+## 0.0.0-dev-v2-20230618174149
+
+### Patch Changes
+
+- Button APi changed
+
 ## 0.0.0-dev-v2-20230617142344

 ### Patch Changes
--- a/packages/core/theme/package.json
+++ b/packages/core/theme/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nextui-org/theme",
-  "version": "0.0.0-dev-v2-20230617142344",
+  "version": "0.0.0-dev-v2-20230618174149",
  "description": "The default theme for NextUI components",
  "keywords": [
    "theme",
--- a/Show More
+++ b/Show More