♻️ Simplify Button block types

Frontendland · Frontendland · commit 20134ff0953d · 2026-01-27T16:32:59.000+01:00
diff --git a/src/blocks/Button/button.ts b/src/blocks/Button/button.ts
@@ -1,12 +1,17 @@
 import type {
     BadgeProps,
-    ButtonProps as WebcoreButtonProps,
+    ButtonProps as WButtonProps,
     IconProps
 } from 'webcoreui/astro'
 
-export type ButtonProps = {
-    icon?: IconProps['type'] | string
+type BaseProps = {
     text?: string
+    icon?: IconProps['type'] | string
+}
+
+export type ButtonProps = {
     badge?: boolean
-    className?: string
-} & WebcoreButtonProps & BadgeProps
+} & BaseProps & WButtonProps & BadgeProps
+
+export type ButtonBlockProps = BaseProps & WButtonProps
+export type BadgeBlockProps = BaseProps & BadgeProps
diff --git a/src/blocks/Deployments/Deployments.astro b/src/blocks/Deployments/Deployments.astro
@@ -1,25 +1,26 @@
 ---
 import {
     Alert,
-    Button,
     Icon,
     Modal
 } from 'webcoreui/astro'
 
+import Button from '@blocks/Button/Button.astro'
+
 import styles from './deployments.module.scss'
 ---
 
 <Alert title="Deployments">
     <Icon type="github" slot="icon" />
     <span>Connect your project to GitHub to start running automatic deployments.</span>
     <br />
-    <Button className={styles.connect} id="connect">Connect</Button>
+    <Button className={styles.connect} id="connect" text="Connect" />
 </Alert>
 
 <Modal title="Are you sure?" subTitle="Confirm update" className="modal">
     <p>Automatic deployments will be enabled for your project.</p>
-    <Button className="close-modal">Confirm</Button>
-    <Button theme="secondary" className="close-modal">Cancel</Button>
+    <Button className="close-modal" text="Confirm" />
+    <Button theme="secondary" className="close-modal" text="Cancel" />
 </Modal>
 
 <script>
diff --git a/src/blocks/Deployments/Deployments.svelte b/src/blocks/Deployments/Deployments.svelte
@@ -3,11 +3,12 @@
     import { closeModal, modal } from 'webcoreui'
     import {
         Alert,
-        Button,
         Icon,
         Modal
     } from 'webcoreui/svelte'
 
+    import Button from '@blocks/Button/Button.astro'
+
     import styles from './deployments.module.scss'
 
     let modalInstance
@@ -26,11 +27,11 @@
     {/snippet}
     <span>Connect your project to GitHub to start running automatic deployments.</span>
     <br />
-    <Button className={styles.connect} onClick={connect}>Connect</Button>
+    <Button className={styles.connect} onClick={connect} text="Connect" />
 </Alert>
 
 <Modal title="Are you sure?" subTitle="Confirm update" className="modal">
     <p>Automatic deployments will be enabled for your project.</p>
-    <Button className="close-modal" onClick={close}>Confirm</Button>
-    <Button theme="secondary" className="close-modal" onClick={close}>Cancel</Button>
+    <Button className="close-modal" onClick={close} text="Confirm" />
+    <Button theme="secondary" className="close-modal" onClick={close} text="Cancel" />
 </Modal>
diff --git a/src/blocks/Deployments/Deployments.tsx b/src/blocks/Deployments/Deployments.tsx
@@ -2,11 +2,12 @@ import React, { useEffect, useState } from 'react'
 import { closeModal,modal } from 'webcoreui'
 import {
     Alert,
-    Button,
     Icon,
     Modal
 } from 'webcoreui/react'
 
+import Button from '@blocks/Button/Button.astro'
+
 import styles from './deployments.module.scss'
 
 type ModalInstance = {
@@ -28,13 +29,13 @@ const Deployments = () => {
         <Alert title="Deployments" icon={<Icon type="github" />}>
             <span>Connect your project to GitHub to start running automatic deployments.</span>
             <br />
-            <Button className={styles.connect} onClick={connect}>Connect</Button>
+            <Button className={styles.connect} onClick={connect} text="Connect" />
 
             <Modal title="Are you sure?" subTitle="Confirm update" className="modal">
                 <p>Automatic deployments will be enabled for your project.</p>
                 <div className="flex xs">
-                    <Button className="close-modal" onClick={close}>Confirm</Button>
-                    <Button theme="secondary" className="close-modal" onClick={close}>Cancel</Button>
+                    <Button className="close-modal" onClick={close} text="Confirm" />
+                    <Button theme="secondary" className="close-modal" onClick={close} text="Cancel" />
                 </div>
             </Modal>
         </Alert>
diff --git a/src/blocks/Empty/empty.ts b/src/blocks/Empty/empty.ts
@@ -1,16 +1,12 @@
-import type {
-    ButtonProps,
-    IconProps
-} from 'webcoreui/astro'
+import type { IconProps } from 'webcoreui/astro'
+
+import type { ButtonBlockProps } from '@blocks/Button/button'
 
 export type EmptyProps = {
     icon?: IconProps['type'] | string
     iconWithBackground?: boolean
     title: string
     text: string
-    buttons?: ({
-        text: string
-        icon?: IconProps['type'] | string
-    } & ButtonProps)[]
+    buttons?: ButtonBlockProps[]
     className?: string
 }
diff --git a/src/blocks/ErrorPage/ErrorPage.astro b/src/blocks/ErrorPage/ErrorPage.astro
@@ -1,8 +1,5 @@
 ---
-import {
-    Button,
-    Icon
-} from 'webcoreui/astro'
+import Button from '@blocks/Button/Button.astro'
 
 import type { ErrorPageProps } from './errorPage'
 import styles from './error-page.module.scss'
@@ -29,19 +26,7 @@ const typeStyle = typeColor
     {subTitle && <h2 class={styles['sub-title']}>{subTitle}</h2>}
     {!!buttons?.length && (
         <div class="flex xs wrap justify-center">
-            {buttons?.map(button => (
-                <Button {...button} icon={null}>
-                    {button.icon && (
-                        <Fragment>
-                            {button.icon.startsWith('<svg')
-                                ? <Fragment set:html={button.icon} />
-                                : <Icon type={button.icon} />
-                            }
-                        </Fragment>
-                    )}
-                    {button.text}
-                </Button>
-            ))}
+            {buttons?.map(button => <Button {...button} />)}
         </div>
     )}
 </section>
diff --git a/src/blocks/ErrorPage/ErrorPage.svelte b/src/blocks/ErrorPage/ErrorPage.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Button } from 'webcoreui/svelte'
+    import Button from '@blocks/Button/Button.svelte'
 
     import type { ErrorPageProps } from './errorPage'
     import styles from './error-page.module.scss'
@@ -28,12 +28,7 @@
     {#if buttons?.length}
         <div class="flex xs wrap justify-center">
             {#each buttons as button}
-                <Button {...button} icon={null}>
-                    {#if button.icon}
-                        {@html button.icon}
-                    {/if}
-                    {button.text}
-                </Button>
+                <Button {...button} />
             {/each}
         </div>
     {/if}
diff --git a/src/blocks/ErrorPage/ErrorPage.tsx b/src/blocks/ErrorPage/ErrorPage.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import { Button } from 'webcoreui/react'
+
+import Button from '@blocks/Button/Button.tsx'
 
 import type { ErrorPageProps } from './errorPage'
 import styles from './error-page.module.scss'
@@ -24,15 +25,7 @@ const ErrorPage = ({
             {!!buttons?.length && (
                 <div className="flex xs wrap justify-center">
                     {buttons?.map((button, index) => (
-                        <Button
-                            {...button}
-                            key={index}
-                            icon={null}
-                            dangerouslySetInnerHTML={{ __html: button.icon
-                                ? `${button.icon} ${button.text}`
-                                : button.text
-                            }}
-                        />
+                        <Button {...button} key={index} />
                     ))}
                 </div>
             )}
diff --git a/src/blocks/ErrorPage/errorPage.ts b/src/blocks/ErrorPage/errorPage.ts
@@ -1,13 +1,10 @@
-import type { ButtonProps, IconProps } from 'webcoreui/astro'
+import type { ButtonBlockProps } from '@blocks/Button/button'
 
 export type ErrorPageProps = {
     type: number
     typeColor?: string
     title: string
     subTitle?: string
-    buttons?: ({
-        text: string
-        icon?: IconProps['type'] | string
-    } & ButtonProps)[]
+    buttons?: ButtonBlockProps[]
     [key: string]: any
 }
diff --git a/src/blocks/Hero/hero.ts b/src/blocks/Hero/hero.ts
@@ -1,21 +1,11 @@
-import type {
-    BadgeProps,
-    ButtonProps,
-    IconProps
-} from 'webcoreui/astro'
-
 import type { AvatarWithRatingProps } from '@blocks/AvatarWithRating/avatarWithRating'
+import type { BadgeBlockProps, ButtonBlockProps } from '@blocks/Button/button'
 
 export type HeroProps = {
-    badge?: {
-        text: string
-    } & BadgeProps | null
+    badge?: BadgeBlockProps
     heading: string
     subHeading?: string
-    buttons?: ({
-        text: string
-        icon?: IconProps['type'] | string
-    } & ButtonProps)[]
+    buttons?: ButtonBlockProps[]
     avatarWithRating?: AvatarWithRatingProps
     image?: {
         src: string
diff --git a/src/blocks/SignUp/SignUp.astro b/src/blocks/SignUp/SignUp.astro
@@ -1,10 +1,11 @@
 ---
 import {
-    Button,
     Card,
     Input
 } from 'webcoreui/astro'
 
+import Button from '@blocks/Button/Button.astro'
+
 import type { SignUpProps } from './signup'
 
 interface Props extends SignUpProps {
@@ -46,14 +47,18 @@ const {
         />
         <div class="flex xs wrap">
             {primaryButtonLabel && (
-                <Button theme={primaryButtonTheme} className={primaryButtonSelector}>
-                    {primaryButtonLabel}
-                </Button>
+                <Button
+                    theme={primaryButtonTheme}
+                    className={primaryButtonSelector}
+                    text={primaryButtonLabel}
+                />
             )}
             {secondaryButtonLabel && (
-                <Button theme={secondaryButtonTheme} className={secondaryButtonSelector}>
-                    {secondaryButtonLabel}
-                </Button>
+                <Button
+                    theme={secondaryButtonTheme}
+                    className={secondaryButtonSelector}
+                    text={secondaryButtonLabel}
+                />
             )}
         </div>
     </form>
diff --git a/src/blocks/SignUp/SignUp.svelte b/src/blocks/SignUp/SignUp.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
     import {
-        Button,
         Card,
         Input
     } from 'webcoreui/svelte'
 
+    import Button from '@blocks/Button/Button.svelte'
+
     import type { SvelteSignUpProps } from './signup'
 
     const {
@@ -41,14 +42,18 @@
         />
         <div class="flex xs wrap">
             {#if primaryButtonLabel}
-                <Button theme={primaryButtonTheme} onClick={primaryOnClick}>
-                    {primaryButtonLabel}
-                </Button>
+                <Button
+                    theme={primaryButtonTheme}
+                    onClick={primaryOnClick}
+                    text={primaryButtonLabel}
+                />
             {/if}
             {#if secondaryButtonLabel}
-                <Button theme={secondaryButtonTheme} onClick={secondaryOnClick}>
-                    {secondaryButtonLabel}
-                </Button>
+                <Button
+                    theme={secondaryButtonTheme}
+                    onClick={secondaryOnClick}
+                    text={secondaryButtonLabel}
+                />
             {/if}
         </div>
     </form>
diff --git a/src/blocks/SignUp/SignUp.tsx b/src/blocks/SignUp/SignUp.tsx
@@ -1,10 +1,11 @@
 import React from 'react'
 import {
-    Button,
     Card,
     Input
 } from 'webcoreui/react'
 
+import Button from '@blocks/Button/Button.tsx'
+
 import type { ReactSignUpProps } from './signup'
 
 const SignUp = ({
@@ -41,14 +42,18 @@ const SignUp = ({
                 />
                 <div className="flex xs wrap">
                     {primaryButtonLabel && (
-                        <Button theme={primaryButtonTheme} onClick={primaryOnClick}>
-                            {primaryButtonLabel}
-                        </Button>
+                        <Button
+                            theme={primaryButtonTheme}
+                            onClick={primaryOnClick}
+                            text={primaryButtonLabel}
+                        />
                     )}
                     {secondaryButtonLabel && (
-                        <Button theme={secondaryButtonTheme} onClick={secondaryOnClick}>
-                            {secondaryButtonLabel}
-                        </Button>
+                        <Button
+                            theme={secondaryButtonTheme}
+                            onClick={secondaryOnClick}
+                            text={secondaryButtonLabel}
+                        />
                     )}
                 </div>
             </form>
diff --git a/src/blocks/Tiles/tiles.ts b/src/blocks/Tiles/tiles.ts
@@ -1,4 +1,6 @@
-import type { BadgeProps, ButtonProps, IconProps } from 'webcoreui/astro'
+import type { ButtonProps, IconProps } from 'webcoreui/astro'
+
+import type { BadgeBlockProps } from '@blocks/Button/button'
 
 export type TilesProps = {
     columns?: 0 | 1 | 2 | 3 | 4
@@ -8,9 +10,6 @@ export type TilesProps = {
         href?: string
         target?: ButtonProps['target']
         icon?: IconProps['type'] | string
-        badge?: {
-            text: string
-            icon?: IconProps['type'] | string
-        } & BadgeProps
+        badge?: BadgeBlockProps
     }[]
 }
diff --git a/src/templates/Portfolio/portfolio.ts b/src/templates/Portfolio/portfolio.ts
diff --git a/src/templates/ProductPage/productPage.ts b/src/templates/ProductPage/productPage.ts
diff --git a/src/tests/e2e/blocks/empty.test.ts b/src/tests/e2e/blocks/empty.test.ts
diff --git a/src/tests/e2e/snapshots/empty.test.ts.png b/src/tests/e2e/snapshots/empty.test.ts.png
