feat: Button component with icon (#6259)

* feat: button with icon

* chore: story example updated

Author: canerakdas

app/[locale]/error.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { ArrowRightIcon } from '@heroicons/react/24/solid';
 import { captureException } from '@sentry/nextjs';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
@@ -37,7 +38,10 @@ const ErrorPage: FC<{ error: Error }> = ({ error }) => {
         <p className="-mt-4 max-w-sm text-center text-lg">
           {t('layouts.error.internalServerError.description')}
         </p>
-        <Button href="/">{t('layouts.error.backToHome')}</Button>
+        <Button href="/">
+          {t('layouts.error.backToHome')}
+          <ArrowRightIcon />
+        </Button>
       </main>
     </CenteredLayout>
   );

app/[locale]/not-found.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { ArrowRightIcon } from '@heroicons/react/24/solid';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
@@ -32,7 +33,10 @@ const NotFoundPage: FC = () => {
         <p className="-mt-4 max-w-sm text-center text-lg">
           {t('layouts.error.notFound.description')}
         </p>
-        <Button href="/">{t('layouts.error.backToHome')}</Button>
+        <Button href="/">
+          {t('layouts.error.backToHome')}
+          <ArrowRightIcon />
+        </Button>
       </main>
     </CenteredLayout>
   );

app/global-error.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { ArrowRightIcon } from '@heroicons/react/24/solid';
 import { captureException } from '@sentry/nextjs';
 import ErrorComponent from 'next/error';
 import type { FC } from 'react';
@@ -39,7 +40,10 @@ const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
               <p className="-mt-4 max-w-sm text-center text-lg">
                 This page has thrown a non-recoverable error.
               </p>
-              <Button href="/">Back to Home</Button>
+              <Button href="/">
+                Back to Home
+                <ArrowRightIcon />
+              </Button>
             </main>
           </CenteredLayout>
         </BaseLayout>

components/Common/Button/index.module.css

@@ -1,10 +1,17 @@
 .button {
   @apply relative
+    inline-flex
+    items-center
+    gap-2
     px-4.5
     py-2.5
     text-center
     font-semibold;
 
+  svg {
+    @apply size-5;
+  }
+
   &[aria-disabled='true'] {
     @apply cursor-not-allowed;
   }

components/Common/Button/index.stories.tsx

@@ -1,3 +1,4 @@
+import { ArrowRightIcon } from '@heroicons/react/24/solid';
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
 import Button from '@/components/Common/Button';
@@ -37,4 +38,17 @@ export const Special: Story = {
   },
 };
 
+export const WithIcon: Story = {
+  args: {
+    kind: 'primary',
+    children: (
+      <>
+        Back to Home
+        <ArrowRightIcon />
+      </>
+    ),
+    disabled: false,
+  },
+};
+
 export default { component: Button } as Meta;

components/Common/CodeBox/index.module.css

@@ -66,10 +66,7 @@
     }
 
     & > .action {
-      @apply flex
-        items-center
-        gap-2
-        px-3
+      @apply px-3
         py-1.5
         font-medium;
     }

components/Common/Pagination/index.module.css

@@ -10,10 +10,7 @@
 
 .previousButton,
 .nextButton {
-  @apply flex
-    items-center
-    gap-2
-    text-sm;
+  @apply text-sm;
 }
 
 .previousButton {

components/Downloads/DownloadButton/index.module.css

@@ -1,11 +1,17 @@
 .downloadButton {
-  @apply flex-row
-    items-center
-    justify-center
-    gap-2;
+  @apply justify-center;
+
+  &.primary {
+    @apply inline-flex
+      dark:hidden;
+  }
+
+  &.special {
+    @apply hidden
+      dark:inline-flex;
+  }
 
   svg {
-    @apply size-5
-      dark:opacity-50;
+    @apply dark:opacity-50;
   }
 }

components/Downloads/DownloadButton/index.tsx

@@ -25,7 +25,7 @@ const DownloadButton: FC<PropsWithChildren<DownloadButtonProps>> = ({
       <Button
         kind="special"
         href={downloadLink}
-        className={classNames(styles.downloadButton, 'hidden dark:flex')}
+        className={classNames(styles.downloadButton, styles.special)}
       >
         {children}
 
@@ -35,7 +35,7 @@ const DownloadButton: FC<PropsWithChildren<DownloadButtonProps>> = ({
       <Button
         kind="primary"
         href={downloadLink}
-        className={classNames(styles.downloadButton, 'flex dark:hidden')}
+        className={classNames(styles.downloadButton, styles.primary)}
       >
         {children}