From 4afad305504f9d71a3629ef9ab86415f75df18dc Mon Sep 17 00:00:00 2001
From: sandro gianola <sandro.gianola@4gifters.com>
Date: Sat, 9 Sep 2023 16:45:13 +0200
Subject: [PATCH 1/3] docs: add responsive button view in code example block

---
 src/routes/utils/ExampleWrapper.svelte | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/routes/utils/ExampleWrapper.svelte b/src/routes/utils/ExampleWrapper.svelte
index a6f2cf6bd..468b7f3ef 100644
--- a/src/routes/utils/ExampleWrapper.svelte
+++ b/src/routes/utils/ExampleWrapper.svelte
@@ -7,6 +7,7 @@
   import { page } from '$app/stores';
   import type { PageData } from '../$types';
   import { identity } from 'svelte/internal';
+  import { DesktopPcOutline, TabletOutline, MobilePhoneOutline } from 'flowbite-svelte-icons';
   export let divClass = 'w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-2 sm:p-6';
 
   // the source of the example, if you want it
@@ -31,6 +32,13 @@
   let showExpandButton: boolean = false;
   let expand: boolean = false;
   let dark: boolean = false;
+  let responsiveDevice: keyof typeof responsiveSize = 'desktop';
+
+  const responsiveSize = {
+    mobile: 'max-w-sm',
+    tablet: 'max-w-lg',
+    desktop: ''
+  };
 
   function init(node: HTMLElement) {
     browserSupport = !!window?.navigator?.clipboard;
@@ -85,11 +93,24 @@
 <div class="mt-8 code-example" bind:this={node} use:init>
   {#if !meta.hideOutput}
     <div class="w-full p-4 border border-gray-200 bg-gray-50 rounded-t-xl dark:border-gray-600 dark:bg-gray-700">
-      <div class="grid grid-cols-2">
+      <div class="grid {!!meta.hideResponsiveButton ? "grid-cols-2" : "grid-cols-3"}">
         {#if path}
           <Button size="xs" color="alternative" class="dark:!bg-gray-900 w-fit hover:text-primary-600 gap-2" href={'' + path} target="_blank" rel="noreferrer">
             <GitHub size="sm" />Edit on GitHub
           </Button>
+          {#if !meta.hideResponsiveButton}
+            <div class="flex justify-center gap-x-2">
+              <Button size="xs" color="alternative" on:click={() => (responsiveDevice = 'desktop')}>
+                <DesktopPcOutline size="sm" />
+              </Button>
+              <Button size="xs" color="alternative" on:click={() => (responsiveDevice = 'tablet')}>
+                <TabletOutline size="sm" />
+              </Button>
+              <Button size="xs" color="alternative" on:click={() => (responsiveDevice = 'mobile')}>
+                <MobilePhoneOutline size="sm" />
+              </Button>
+            </div>
+          {/if}
           <div class="ml-auto">
             <ExampleDarkMode on:click={() => (dark = !dark)} {dark} />
           </div>
@@ -100,7 +121,7 @@
     <div class="code-preview-wrapper">
       <div class="flex p-0 bg-white border-gray-200 bg-gradient-to-r code-preview dark:bg-gray-900 border-x dark:border-gray-600" class:dark>
         <div class="w-full code-responsive-wrapper">
-          <div class={twJoin(divClass, meta.class)}>
+          <div class={twJoin(divClass, meta.class, responsiveSize[responsiveDevice])}>
             <slot name="example" />
           </div>
         </div>

From 6866cc90977827e4ea7f79fff74d860d086c8eef Mon Sep 17 00:00:00 2001
From: sandro gianola <sandro.gianola@4gifters.com>
Date: Sun, 10 Sep 2023 14:00:41 +0200
Subject: [PATCH 2/3] docs: rename meta for hide responive buttons

---
 src/routes/utils/ExampleWrapper.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/utils/ExampleWrapper.svelte b/src/routes/utils/ExampleWrapper.svelte
index 468b7f3ef..7cab8d031 100644
--- a/src/routes/utils/ExampleWrapper.svelte
+++ b/src/routes/utils/ExampleWrapper.svelte
@@ -93,12 +93,12 @@
 <div class="mt-8 code-example" bind:this={node} use:init>
   {#if !meta.hideOutput}
     <div class="w-full p-4 border border-gray-200 bg-gray-50 rounded-t-xl dark:border-gray-600 dark:bg-gray-700">
-      <div class="grid {!!meta.hideResponsiveButton ? "grid-cols-2" : "grid-cols-3"}">
+      <div class="grid {!!meta.hideResponsiveButtons ? "grid-cols-2" : "grid-cols-3"}">
         {#if path}
           <Button size="xs" color="alternative" class="dark:!bg-gray-900 w-fit hover:text-primary-600 gap-2" href={'' + path} target="_blank" rel="noreferrer">
             <GitHub size="sm" />Edit on GitHub
           </Button>
-          {#if !meta.hideResponsiveButton}
+          {#if !meta.hideResponsiveButtons}
             <div class="flex justify-center gap-x-2">
               <Button size="xs" color="alternative" on:click={() => (responsiveDevice = 'desktop')}>
                 <DesktopPcOutline size="sm" />

From 5dc93981c8e5978bb0981a771ba45dfa51d9266a Mon Sep 17 00:00:00 2001
From: sandro gianola <sandro.gianola@4gifters.com>
Date: Sun, 10 Sep 2023 14:54:17 +0200
Subject: [PATCH 3/3] docs: disable responsive buttons when not need it or
 brake the style

---
 src/routes/docs/components/avatar.md         |  2 +-
 src/routes/docs/components/banner.md         |  4 +-
 src/routes/docs/components/card.md           |  4 +-
 src/routes/docs/components/carousel.md       | 18 ++++-----
 src/routes/docs/components/device-mockups.md |  6 +--
 src/routes/docs/components/dropdown.md       |  8 ++--
 src/routes/docs/components/footer.md         | 10 ++---
 src/routes/docs/components/kbd.md            | 14 +++----
 src/routes/docs/components/mega-menu.md      | 10 ++---
 src/routes/docs/components/modal.md          |  6 +--
 src/routes/docs/components/navbar.md         | 18 ++++-----
 src/routes/docs/components/popover.md        |  2 +-
 src/routes/docs/components/rating.md         |  2 +-
 src/routes/docs/components/skeleton.md       |  2 +-
 src/routes/docs/components/speed-dial.md     |  2 +-
 src/routes/docs/components/tab.md            |  2 +-
 src/routes/docs/components/timeline.md       |  2 +-
 src/routes/docs/components/toast.md          |  2 +-
 src/routes/docs/components/tooltip.md        |  6 +--
 src/routes/docs/components/typography.md     | 12 +++---
 src/routes/docs/forms/checkbox.md            | 10 ++---
 src/routes/docs/forms/floating-label.md      |  8 ++--
 src/routes/docs/forms/input-field.md         |  4 +-
 src/routes/docs/forms/radio.md               | 10 ++---
 src/routes/docs/forms/textarea.md            |  2 +-
 src/routes/docs/forms/toggle.md              |  2 +-
 src/routes/docs/typography/blockquote.md     |  2 +-
 src/routes/docs/typography/heading.md        |  2 +-
 src/routes/docs/typography/image.md          | 22 +++++-----
 src/routes/docs/typography/paragraph.md      |  6 +--
 src/routes/docs/typography/text.md           | 42 ++++++++++----------
 31 files changed, 121 insertions(+), 121 deletions(-)

diff --git a/src/routes/docs/components/avatar.md b/src/routes/docs/components/avatar.md
index 21fc905dc..2fa4b3292 100644
--- a/src/routes/docs/components/avatar.md
+++ b/src/routes/docs/components/avatar.md
@@ -185,7 +185,7 @@ Use this example if you want to show a dropdown menu when clicking on the avatar
 
 Select size from xs | sm | md | lg | xl.
 
-```svelte example class="flex flex-col gap-4" hideScript
+```svelte example class="flex flex-col gap-4" hideScript hideResponsiveButtons
 <script>
   import { Avatar } from 'flowbite-svelte';
 </script>
diff --git a/src/routes/docs/components/banner.md b/src/routes/docs/components/banner.md
index cb1bba763..059440483 100644
--- a/src/routes/docs/components/banner.md
+++ b/src/routes/docs/components/banner.md
@@ -105,7 +105,7 @@ Use this free example to show a text message for announcement with a CTA link.
 
 This example can be used to encourage your website visitors to sign up to your email newsletter by showing an inline form inside the sticky banner on the top side of your page.
 
-```svelte example class="flex flex-col relative"
+```svelte example class="flex flex-col relative" hideResponsiveButtons
 <script>
   import { Banner, Skeleton, ImagePlaceholder } from 'flowbite-svelte';
 </script>
@@ -126,7 +126,7 @@ This example can be used to encourage your website visitors to sign up to your e
 
 This example can be used to share important information with your website visitors by showing a heading and a paragraph inside the sticky banner and two CTA buttons with links.
 
-```svelte example class="flex flex-col relative"
+```svelte example class="flex flex-col relative" hideResponsiveButtons
 <script>
   import { Banner, Skeleton, ImagePlaceholder } from 'flowbite-svelte';
   import { OpenBookSolid, ArrowRightSolid } from 'flowbite-svelte-icons';
diff --git a/src/routes/docs/components/card.md b/src/routes/docs/components/card.md
index 118402e10..78cc6982d 100644
--- a/src/routes/docs/components/card.md
+++ b/src/routes/docs/components/card.md
@@ -113,7 +113,7 @@ You can use the following example of a card element with an image for blog posts
 
 If you want to spice up your cards you can use the following card which has its child elements aligned horizontally.
 
-```svelte example class="flex justify-center flex-wrap gap-2"
+```svelte example class="flex justify-center flex-wrap gap-2" hideResponsiveButtons
 <script>
   import { Card, Button, Toggle } from 'flowbite-svelte';
   let hCard = false;
@@ -347,7 +347,7 @@ Show detailed information to potential customers about your product’s pricing
 
 Use this example to split cards into multiple sections such as for testimonials or reviews.
 
-```svelte example class="flex justify-center flex-wrap gap-2"
+```svelte example class="flex justify-center flex-wrap gap-2" hideResponsiveButtons
 <script>
   import { Card } from 'flowbite-svelte';
 </script>
diff --git a/src/routes/docs/components/carousel.md b/src/routes/docs/components/carousel.md
index 54b048dac..a82847b48 100644
--- a/src/routes/docs/components/carousel.md
+++ b/src/routes/docs/components/carousel.md
@@ -73,7 +73,7 @@ Set the `duration` prop to define the time interval for chaning images. Time is
 
 The default value for `duration` is set to zero that means no autochange of images. In that case you can control which image is displayed by the `index` prop.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Carousel } from 'flowbite-svelte';
   import { images } from './imageData/+server.js';
@@ -90,7 +90,7 @@ Use the internal `Controls` component to listen to click events which will trigg
 
 You can customize the control elements with the `class` property.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Carousel } from 'flowbite-svelte';
   import { images } from './imageData/+server.js';
@@ -107,7 +107,7 @@ You can customize the control elements with the `class` property.
 
 Show the carousel indicators by adding the internal `Indicators` component.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Carousel } from 'flowbite-svelte';
   import { images } from './imageData/+server.js';
@@ -124,7 +124,7 @@ Show the carousel indicators by adding the internal `Indicators` component.
 
 You can control the `Carousel` component externally by the `index` prop. Here is an example how to use the `Thumbnails` component to achieve that.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Carousel, Thumbnails } from 'flowbite-svelte';
   import { images } from './imageData/+server.js';
@@ -145,7 +145,7 @@ You can control the `Carousel` component externally by the `index` prop. Here is
 
 The `Carousel` exposes the `change` event containing info about the currently displayed image. You can use it to build custom caption for the carousel.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Carousel } from 'flowbite-svelte';
   import { images } from './imageData/+server.js';
@@ -170,7 +170,7 @@ The `Carousel` exposes the `change` event containing info about the currently di
 
 You can use `slot="slide"` and internal component `Slide` to control the image display. Here's an example how to wrap images with the anchor element.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Carousel } from 'flowbite-svelte';
   import { images } from './imageData/+server.js';
@@ -190,7 +190,7 @@ You can use `slot="slide"` and internal component `Slide` to control the image d
 
 ### Basic customization
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Carousel } from 'flowbite-svelte';
   import { images } from './imageData/+server.js';
@@ -206,7 +206,7 @@ You can use `slot="slide"` and internal component `Slide` to control the image d
 
 ### Advanced customization
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Carousel, Thumbnails, Button, Indicator } from 'flowbite-svelte';
   import { CaretRightOutline } from 'flowbite-svelte-icons';
@@ -234,7 +234,7 @@ You can use `slot="slide"` and internal component `Slide` to control the image d
 
 ### Carousel transition
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Carousel } from 'flowbite-svelte';
   import { images } from './imageData/+server.js';
diff --git a/src/routes/docs/components/device-mockups.md b/src/routes/docs/components/device-mockups.md
index e9fb8fd97..5c1659f12 100644
--- a/src/routes/docs/components/device-mockups.md
+++ b/src/routes/docs/components/device-mockups.md
@@ -78,7 +78,7 @@ Use this alternative phone mockup example if you want to feature previews for an
 
 This component can be used to show an application preview inside of a responsive tablet mockup.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { DeviceMockup } from 'flowbite-svelte';
 </script>
@@ -93,7 +93,7 @@ This component can be used to show an application preview inside of a responsive
 
 This example can be used to show a screenshot of your application inside a laptop mockup.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { DeviceMockup } from 'flowbite-svelte';
 </script>
@@ -108,7 +108,7 @@ This example can be used to show a screenshot of your application inside a lapto
 
 Use this example to show a preview of your applicaiton inside a desktop device such as an iMac.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { DeviceMockup } from 'flowbite-svelte';
 </script>
diff --git a/src/routes/docs/components/dropdown.md b/src/routes/docs/components/dropdown.md
index 004549a0d..72e328fc5 100644
--- a/src/routes/docs/components/dropdown.md
+++ b/src/routes/docs/components/dropdown.md
@@ -365,7 +365,7 @@ Show a list of toggle switch elements inside the dropdown menu to enable a yes o
 
 <p>You can also use the dropdown element inside a navigation bar and add a second level of navigation hierarchy, but make sure to use Navbar components.</p>
 
-```svelte example class="flex justify-center items-start h-96"
+```svelte example class="flex justify-center items-start h-96" hideResponsiveButtons
 <script>
   import { Button, Dropdown, DropdownItem, DropdownDivider, Navbar, NavBrand, NavHamburger, NavUl, NavLi } from 'flowbite-svelte';
   import { ChevronDownSolid } from 'flowbite-svelte-icons';
@@ -603,7 +603,7 @@ Use this example to also show the name or email of the user next to the avatar f
 
 <p>The dropdown menus work with buttons of all sizes including smaller or larger ones.</p>
 
-```svelte example class="flex justify-center items-start gap-4 h-80"
+```svelte example class="flex justify-center items-start gap-4 h-80" hideResponsiveButtons
 <script>
   import { Button, Dropdown, DropdownItem } from 'flowbite-svelte';
   import { ChevronDownSolid } from 'flowbite-svelte-icons';
@@ -627,7 +627,7 @@ Use this example to also show the name or email of the user next to the avatar f
 
 You can also use the `placement={top|right|bottom|left}` options to choose the placement of the dropdown menu. By default the positioning is set to the bottom side of the button.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Button, Dropdown, DropdownItem } from 'flowbite-svelte';
   import { ChevronDownSolid, ChevronUpSolid, ChevronRightSolid, ChevronLeftSolid } from 'flowbite-svelte-icons';
@@ -653,7 +653,7 @@ You can also use the `placement={top|right|bottom|left}` options to choose the p
 
 ## Double placement
 
-```svelte example class="flex justify-center items-center gap-2 h-96"
+```svelte example class="flex justify-center items-center gap-2 h-96" hideResponsiveButtons
 <script>
   import { Button, Dropdown, DropdownItem } from 'flowbite-svelte';
   import { ChevronDownSolid, ChevronUpSolid } from 'flowbite-svelte-icons';
diff --git a/src/routes/docs/components/footer.md b/src/routes/docs/components/footer.md
index 21c771471..2d4251dc6 100644
--- a/src/routes/docs/components/footer.md
+++ b/src/routes/docs/components/footer.md
@@ -28,7 +28,7 @@ The footer is one of the most underestimated sections of a website being located
 
 <p>Use this footer component to show a copyright notice and some helpful website links.</p>
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Footer, FooterCopyright, FooterLinkGroup, FooterLink } from 'flowbite-svelte';
 </script>
@@ -48,7 +48,7 @@ The footer is one of the most underestimated sections of a website being located
 
 <p>Use this component to show your brand’s logo, a few website links and the copyright notice on a second row.</p>
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Footer, FooterCopyright, FooterLinkGroup, FooterBrand, FooterLink } from 'flowbite-svelte';
 </script>
@@ -72,7 +72,7 @@ The footer is one of the most underestimated sections of a website being located
 
 <p>This footer component can be used to show your brand’s logo, multiple rows of website links, a copyright notice and social media profile icons including Twitter, Facebook, Instagram, and more.</p>
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Footer, FooterCopyright, FooterLinkGroup, FooterLink, FooterBrand, FooterIcon } from 'flowbite-svelte';
   import { FacebookSolid, GithubSolid, DiscordSolid, TwitterSolid } from 'flowbite-svelte-icons';
@@ -136,7 +136,7 @@ The footer is one of the most underestimated sections of a website being located
 
 <p>If you have a website with many pages you can use this footer component to show a sitemap spanning the entire width of a row followed below by a copyright notice and social media icons.</p>
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Footer, FooterLinkGroup, FooterLink, FooterBrand, FooterIcon, FooterCopyright } from 'flowbite-svelte';
   import { FacebookSolid, GithubSolid, DiscordSolid, TwitterSolid } from 'flowbite-svelte-icons';
@@ -208,7 +208,7 @@ The footer is one of the most underestimated sections of a website being located
 
 Use this example to set create a sticky footer by using a fixed position to the bottom of the document page as the user scrolls up or down the main content area.
 
-```svelte example class="relative"
+```svelte example class="relative" hideResponsiveButtons
 <script>
   import { Footer, FooterLinkGroup, FooterLink, ImagePlaceholder, TextPlaceholder, Skeleton, FooterCopyright } from 'flowbite-svelte';
 </script>
diff --git a/src/routes/docs/components/kbd.md b/src/routes/docs/components/kbd.md
index ed2e3d611..1ddb53c95 100644
--- a/src/routes/docs/components/kbd.md
+++ b/src/routes/docs/components/kbd.md
@@ -29,7 +29,7 @@ The KBD (Keyboard) component can be used to indicate a textual user input from t
 
 Here’s a list of KBD components that you can use inside any other element.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { Kbd } from 'flowbite-svelte';
 </script>
@@ -47,7 +47,7 @@ Here’s a list of KBD components that you can use inside any other element.
 
 Use this example by nesting an inline KBD component inside a paragraph.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { Kbd } from 'flowbite-svelte';
 </script>
@@ -61,7 +61,7 @@ Use this example by nesting an inline KBD component inside a paragraph.
 
 The KBD component can also be used inside table components to denote what type of key can be pressed for certain descriptions.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Kbd, Table, TableHead, TableHeadCell, TableBody, TableBodyCell, TableBodyRow, ArrowKeyUp, ArrowKeyDown, ArrowKeyRight, ArrowKeyLeft } from 'flowbite-svelte';
 </script>
@@ -113,7 +113,7 @@ The KBD component can also be used inside table components to denote what type o
 
 Use this example to show arrow keys inside the KBD styled element.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Kbd, ArrowKeyUp, ArrowKeyDown, ArrowKeyRight, ArrowKeyLeft } from 'flowbite-svelte';
 </script>
@@ -140,7 +140,7 @@ Use this example to show arrow keys inside the KBD styled element.
 
 Use this example if you need to show a key from the latin alphabet
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { Kbd } from 'flowbite-svelte';
 </script>
@@ -177,7 +177,7 @@ Use this example if you need to show a key from the latin alphabet
 
 Use this example to show a key inside a KBD component from the english numeral system.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { Kbd } from 'flowbite-svelte';
 </script>
@@ -198,7 +198,7 @@ Use this example to show a key inside a KBD component from the english numeral s
 
 This example can be used to denote function keys inside the KBD component.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { Kbd } from 'flowbite-svelte';
 </script>
diff --git a/src/routes/docs/components/mega-menu.md b/src/routes/docs/components/mega-menu.md
index 24fb05990..c1e1a1a5c 100644
--- a/src/routes/docs/components/mega-menu.md
+++ b/src/routes/docs/components/mega-menu.md
@@ -27,7 +27,7 @@ The mega menu component is a full-width dropdown that can be triggered by clicki
 
 Use this example to show a list of links aligned on three columns inside the mega menu dropdown.
 
-```svelte example class="h-80"
+```svelte example class="h-80" hideResponsiveButtons
 <script>
   import { Navbar, NavBrand, NavHamburger, NavUl, NavLi, MegaMenu } from 'flowbite-svelte';
   import { ChevronDownOutline } from 'flowbite-svelte-icons';
@@ -71,7 +71,7 @@ Use this example to show a list of links aligned on three columns inside the meg
 
 This example of a mega menu dropdown can be used to also show an icon near the text of the link.
 
-```svelte example class="h-80 md:h-80"
+```svelte example class="h-80 md:h-80" hideResponsiveButtons
 <script>
   import { Navbar, NavBrand, NavHamburger, NavUl, NavLi, MegaMenu } from 'flowbite-svelte';
   import { IconOutline, ChevronDownOutline } from 'flowbite-svelte-icons';
@@ -118,7 +118,7 @@ This example of a mega menu dropdown can be used to also show an icon near the t
 
 Use this example to show a mega menu dropdown that spans the entire width of the document page.
 
-```svelte example class="h-96 relative"
+```svelte example class="h-96 relative" hideResponsiveButtons
 <script>
   import { Navbar, NavBrand, NavHamburger, NavUl, NavLi, MegaMenu } from 'flowbite-svelte';
   import { ChevronDownOutline } from 'flowbite-svelte-icons';
@@ -165,7 +165,7 @@ Use this example to show a mega menu dropdown that spans the entire width of the
 
 This example can be used to also show a CTA button or link next to the menu items inside the dropdown.
 
-```svelte example class="h-96 relative"
+```svelte example class="h-96 relative" hideResponsiveButtons
 <script>
   import { Navbar, NavBrand, NavHamburger, NavUl, NavLi, MegaMenu } from 'flowbite-svelte';
   import { ChevronDownOutline, ArrowRightOutline } from 'flowbite-svelte-icons';
@@ -236,7 +236,7 @@ This example can be used to also show a CTA button or link next to the menu item
 
 This example can be used to also show a CTA with a backdround image inside the dropdown next to the other menu items and links.
 
-```svelte example class="h-96 relative"
+```svelte example class="h-96 relative" hideResponsiveButtons
 <script>
   import { Navbar, NavBrand, NavHamburger, NavUl, NavLi, MegaMenu, Button } from 'flowbite-svelte';
   import { ChevronDownOutline } from 'flowbite-svelte-icons';
diff --git a/src/routes/docs/components/modal.md b/src/routes/docs/components/modal.md
index aaeea338b..e8ee0bc52 100644
--- a/src/routes/docs/components/modal.md
+++ b/src/routes/docs/components/modal.md
@@ -199,7 +199,7 @@ Use this web3 modal component to show crypto wallet connection options like Meta
 
 You can use five different modal sizing options starting from extra small to extra large, but keep in mind that the width of these modals will remain the same when browsing on smaller devices.
 
-```svelte example class="flex justify-center"
+```svelte example class="flex justify-center" hideResponsiveButtons
 <script>
   import { Button, Modal } from 'flowbite-svelte';
   let id = 'size-modal';
@@ -267,7 +267,7 @@ You can use five different modal sizing options starting from extra small to ext
 
 ## Placement
 
-```svelte example class="flex justify-center"
+```svelte example class="flex justify-center" hideResponsiveButtons
 <script>
   import { Button, Modal } from 'flowbite-svelte';
   let id;
@@ -305,7 +305,7 @@ You can use five different modal sizing options starting from extra small to ext
 
 ## Colors
 
-```svelte example class="flex justify-center"
+```svelte example class="flex justify-center" hideResponsiveButtons
 <script>
   import { Button, Modal, P } from 'flowbite-svelte';
   let open = false;
diff --git a/src/routes/docs/components/navbar.md b/src/routes/docs/components/navbar.md
index 9a0e342a8..43719fcf8 100644
--- a/src/routes/docs/components/navbar.md
+++ b/src/routes/docs/components/navbar.md
@@ -28,7 +28,7 @@ Get started with the responsive navbar component from Flowbite to quickly set up
 
 Use this example of a navigation bar built with the utility classes from Tailwind CSS to enable users to navigate across the pages of your website.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte';
 </script>
@@ -53,7 +53,7 @@ Use this example of a navigation bar built with the utility classes from Tailwin
 
 Utilize the `href` prop within the `NavLi` component to incorporate a hyperlink. To initiate the application of the active class, include the `activeUrl` prop within the `NavUl` component:
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { page } from '$app/stores';
   import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte';
@@ -78,7 +78,7 @@ Utilize the `href` prop within the `NavLi` component to incorporate a hyperlink.
 
 Control the `active` and `nonactive` class by using `activeClass` and `nonActiveClass`:
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { page } from '$app/stores';
   import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte';
@@ -107,7 +107,7 @@ Control the `active` and `nonactive` class by using `activeClass` and `nonActive
 
 This example can be used to show a secondary dropdown menu when clicking on one of the navigation links.
 
-```svelte example class="h-80"
+```svelte example class="h-80" hideResponsiveButtons
 <script>
   import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Dropdown, DropdownItem, DropdownDivider } from 'flowbite-svelte';
   import { ChevronDownOutline } from 'flowbite-svelte-icons';
@@ -144,7 +144,7 @@ This example can be used to show a secondary dropdown menu when clicking on one
 
 Use this example of a navbar element to also show a search input element that you can integrate for a site-wide search.
 
-```svelte example class="h-80"
+```svelte example class="h-80" hideResponsiveButtons
 <script>
   import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Button, Input } from 'flowbite-svelte';
   import { SearchOutline } from 'flowbite-svelte-icons';
@@ -179,7 +179,7 @@ Use this example of a navbar element to also show a search input element that yo
 
 Use the following navbar element to show a call to action button alongside the logo and page links.
 
-```svelte example class="h-80 md:h-64"
+```svelte example class="h-80 md:h-64" hideResponsiveButtons
 <script>
   import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Button, Input } from 'flowbite-svelte';
 </script>
@@ -207,7 +207,7 @@ Use the following navbar element to show a call to action button alongside the l
 
 Use this example to keep the navbar positioned fixed to the top side as you scroll down the document page.
 
-```svelte example class="h-80"
+```svelte example class="h-80" hideResponsiveButtons
 <script>
   import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, ImagePlaceholder, Skeleton, TextPlaceholder } from 'flowbite-svelte';
 </script>
@@ -239,7 +239,7 @@ Use this example to keep the navbar positioned fixed to the top side as you scro
 
 Use this example to create a navigation bar with a user profile or button to toggle a dropdown menu.
 
-```svelte example class="h-80"
+```svelte example class="h-80" hideResponsiveButtons
 <script>
   import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Avatar, Dropdown, DropdownItem, DropdownHeader, DropdownDivider } from 'flowbite-svelte';
 </script>
@@ -278,7 +278,7 @@ Use this example to create a navigation bar with a user profile or button to tog
 
 Use this example to show a solid background for the navbar component instead of being transparent.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte';
 </script>
diff --git a/src/routes/docs/components/popover.md b/src/routes/docs/components/popover.md
index 04bcf0496..77f492625 100644
--- a/src/routes/docs/components/popover.md
+++ b/src/routes/docs/components/popover.md
@@ -327,7 +327,7 @@ Increase or decrease the default offset by adding the `offset` attribute where t
 
 Customize the animation of the popover component by using the transition functions from Svelte.
 
-```svelte example class="flex h-44 items-end justify-center gap-8"
+```svelte example class="flex h-44 items-end justify-center gap-8" hideResponsiveButtons
 <script>
   import { Popover, Button } from 'flowbite-svelte';
   import { blur, fade, slide } from 'svelte/transition';
diff --git a/src/routes/docs/components/rating.md b/src/routes/docs/components/rating.md
index cb2728efe..243277708 100644
--- a/src/routes/docs/components/rating.md
+++ b/src/routes/docs/components/rating.md
@@ -237,7 +237,7 @@ Use this component to show a single rating comment and its score alongside other
 
 Use this component to show the review content from a user alongside the avatar, location, details, and the score inside a card element.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Review } from 'flowbite-svelte';
   import { LandmarkSolid, CalendarMonthSolid, UsersGroupOutline, ThumbsUpSolid, ThumbsDownSolid } from 'flowbite-svelte-icons';
diff --git a/src/routes/docs/components/skeleton.md b/src/routes/docs/components/skeleton.md
index c276a8f55..b1a2b414e 100644
--- a/src/routes/docs/components/skeleton.md
+++ b/src/routes/docs/components/skeleton.md
@@ -41,7 +41,7 @@ Use the skeleton component to indicate a loading status with placeholder element
 
 ## Image placeholder
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { ImagePlaceholder } from 'flowbite-svelte';
 </script>
diff --git a/src/routes/docs/components/speed-dial.md b/src/routes/docs/components/speed-dial.md
index 2d769a2f0..08b97f318 100644
--- a/src/routes/docs/components/speed-dial.md
+++ b/src/routes/docs/components/speed-dial.md
@@ -53,7 +53,7 @@ To initialize a speed dial component you need to wrap the trigger element and th
 
 The Speed Dial components accommodate a variety of Button component properties, including color options (blue, dark, alternative, light, green, red, yellow, primary, and purple), gradient, shadow, and outline styles. For further information, please refer to **[the Button component](https://flowbite-svelte.com/components/button)** documentation.
 
-```svelte example class="relative h-96"
+```svelte example class="relative h-96" hideResponsiveButtons
 <script>
   import { SpeedDial, SpeedDialButton } from 'flowbite-svelte';
   import { ShareNodesSolid } from 'flowbite-svelte-icons';
diff --git a/src/routes/docs/components/tab.md b/src/routes/docs/components/tab.md
index 63d7e37f6..6f539353a 100644
--- a/src/routes/docs/components/tab.md
+++ b/src/routes/docs/components/tab.md
@@ -228,7 +228,7 @@ If you want to use pills as a style for the tabs component use `style="pill"`.
 
 If you want to show the tabs on the full width relative to the parent element use `tabStype="full"` prop.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Tabs, TabItem } from 'flowbite-svelte';
 </script>
diff --git a/src/routes/docs/components/timeline.md b/src/routes/docs/components/timeline.md
index af1ab9072..971cf9f11 100644
--- a/src/routes/docs/components/timeline.md
+++ b/src/routes/docs/components/timeline.md
@@ -88,7 +88,7 @@ Use this vertical timeline component with icons and badges to show a more advanc
 
 Use this horizontally aligned timeline component to show a series of data in a chronological order.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Timeline, TimelineItem } from 'flowbite-svelte';
   import { CalendarWeekSolid } from 'flowbite-svelte-icons';
diff --git a/src/routes/docs/components/toast.md b/src/routes/docs/components/toast.md
index 13095b28c..f02360d3f 100644
--- a/src/routes/docs/components/toast.md
+++ b/src/routes/docs/components/toast.md
@@ -334,7 +334,7 @@ Use this interactive toast component to encourage users to make a certain action
 
 Use the position property to position these toast components relative to the main content wrapper element from your document.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { Toast } from 'flowbite-svelte';
 </script>
diff --git a/src/routes/docs/components/tooltip.md b/src/routes/docs/components/tooltip.md
index 7ba607438..ce544266d 100644
--- a/src/routes/docs/components/tooltip.md
+++ b/src/routes/docs/components/tooltip.md
@@ -42,7 +42,7 @@ To get started with using tooltips all you need to do is set `triggeredBy` attri
 
 You can use choose between dark and light version styles for the tooltip component by changing the utility classes from Tailwind CSS and by applying the `type={light|dark}` data attribute.
 
-```svelte example class="flex items-end gap-2 h-32"
+```svelte example class="flex items-end gap-2 h-32" hideResponsiveButtons
 <script>
   import { Tooltip, Button } from 'flowbite-svelte';
   let type = 'dark';
@@ -60,7 +60,7 @@ The positioning of the tooltip element relative to the triggering element (eg. b
 
 **Note!** This examples shows you also how to share one tooltip between multiple triggering elements using advanced CSS query.
 
-```svelte example class="flex items-center gap-2 h-36"
+```svelte example class="flex items-center gap-2 h-36" hideResponsiveButtons
 <script>
   import { Tooltip, Button } from 'flowbite-svelte';
   let placement = 'left';
@@ -124,7 +124,7 @@ Various color palettes can be set for a tooltip by using the `color` property fr
 
 When you want to add a fully custom styles, use `type="custom"`, `defaultClass`, and `class` to modify the tooltip styling.
 
-```svelte example class="flex items-center h-64 gap-2"
+```svelte example class="flex items-center h-64 gap-2" hideResponsiveButtons
 <script>
   import { Tooltip, Button } from 'flowbite-svelte';
 </script>
diff --git a/src/routes/docs/components/typography.md b/src/routes/docs/components/typography.md
index b13b2e5e0..55b56b40e 100644
--- a/src/routes/docs/components/typography.md
+++ b/src/routes/docs/components/typography.md
@@ -21,7 +21,7 @@ We have listed some of the commonly used typography classes that we use througho
 
 Use the following text-size utility classes from Tailwind to set the font size for any text element.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <p class="text-xs dark:text-white">Flowbite</p>
 
 <p class="text-sm dark:text-white">FlowBite</p>
@@ -53,7 +53,7 @@ Use the following text-size utility classes from Tailwind to set the font size f
 
 Use the following font-weight utility classes to set the font weight for any text element.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <p class="font-thin dark:text-white">FlowBite</p>
 
 <p class="font-extralight dark:text-white">FlowBite</p>
@@ -77,7 +77,7 @@ Use the following font-weight utility classes to set the font weight for any tex
 
 Use the following leading-type utility classes to set the line height for any text element.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <p class="leading-none dark:text-gray-400">Themesberg was created to bring quality ...</p>
 
 <p class="leading-tight dark:text-gray-400">Themesberg was created to bring quality ...</p>
@@ -95,7 +95,7 @@ Use the following leading-type utility classes to set the line height for any te
 
 Use the following code to create list items with ordered and unordered lists.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { List, Li, Heading } from 'flowbite-svelte';
 </script>
@@ -124,7 +124,7 @@ Use the following code to create list items with ordered and unordered lists.
 
 Use the list-inside and list-outside classes to set the list item position inside a list component.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { List, Li, Heading } from 'flowbite-svelte';
 </script>
@@ -147,7 +147,7 @@ Use the list-inside and list-outside classes to set the list item position insid
 
 You can use the following classes to set the text decoration for any inline text element.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <p class="underline dark:text-gray-400">please read our terms and services</p>
 
 <p class="line-through dark:text-gray-400">please read our terms and services</p>
diff --git a/src/routes/docs/forms/checkbox.md b/src/routes/docs/forms/checkbox.md
index a6a795328..c79733c02 100644
--- a/src/routes/docs/forms/checkbox.md
+++ b/src/routes/docs/forms/checkbox.md
@@ -150,7 +150,7 @@ Use this example to show a list of checkbox items grouped inside a card.
 
 Use this example to show a list of checkbox items inside a card horizontally.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { Checkbox } from 'flowbite-svelte';
 </script>
@@ -207,7 +207,7 @@ Use this example to show a list of checkbox items inside a dropdown menu.
 
 You can align the checkbox elements horizontally by using a wrapper tag and applying the flex class.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { Checkbox } from 'flowbite-svelte';
 </script>
@@ -222,7 +222,7 @@ You can align the checkbox elements horizontally by using a wrapper tag and appl
 
 You can use the property `inline` as the alternative.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { Checkbox } from 'flowbite-svelte';
 </script>
@@ -235,7 +235,7 @@ You can use the property `inline` as the alternative.
 
 ## Colors
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { Label, Checkbox } from 'flowbite-svelte';
 </script>
@@ -258,7 +258,7 @@ You can use the property `inline` as the alternative.
 
 Use this example of an advanced layout of checkbox elements where the label parent element can be styled when the checkbox is checked.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Checkbox } from 'flowbite-svelte';
   import React from '../../utils/icons/React.svelte';
diff --git a/src/routes/docs/forms/floating-label.md b/src/routes/docs/forms/floating-label.md
index a5fd982d6..4c7c8f3da 100644
--- a/src/routes/docs/forms/floating-label.md
+++ b/src/routes/docs/forms/floating-label.md
@@ -31,7 +31,7 @@ On this page you will find a three different input field styles including a stan
 
 Get started with the following three styles for the floating label component and use the label tag as a visual placeholder using the peer-placeholder-shown and peer-focus utility classes from Tailwind CSS.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { FloatingLabelInput } from 'flowbite-svelte';
 </script>
@@ -47,7 +47,7 @@ Get started with the following three styles for the floating label component and
 
 Apply the disabled attribute to the input fields to disallow the user from changing the content.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { FloatingLabelInput } from 'flowbite-svelte';
 </script>
@@ -63,7 +63,7 @@ Apply the disabled attribute to the input fields to disallow the user from chang
 
 Use the following examples of input validation for the success and error messages by applying the validation text below the input field and using the green or red color classes from Tailwind CSS.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { FloatingLabelInput, Helper } from 'flowbite-svelte';
 </script>
@@ -122,7 +122,7 @@ Use the following examples of input validation for the success and error message
 
 Use the small and default sizes of the floating label input fields from the following example.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { FloatingLabelInput } from 'flowbite-svelte';
 </script>
diff --git a/src/routes/docs/forms/input-field.md b/src/routes/docs/forms/input-field.md
index 772c37cbd..a3b854533 100644
--- a/src/routes/docs/forms/input-field.md
+++ b/src/routes/docs/forms/input-field.md
@@ -31,7 +31,7 @@ On this page you will find all of the input types based on multiple variants, st
 
 Use this example as a generic form element which includes multiple input fields types such as text, email, password, number, URL, and phone number and use the grid layout to add multiple columns and rows.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Input, Label, Helper, Button, Checkbox, A } from 'flowbite-svelte';
 </script>
@@ -184,7 +184,7 @@ Use the following example to apply validation styles for success and error messa
 
 This example can be used to add a descriptive icon or additional text inside the input field.
 
-```svelte example class="space-y-6"
+```svelte example class="space-y-6" hideResponsiveButtons
 <script>
   import { Label, Input, Button, InputAddon, ButtonGroup, Checkbox } from 'flowbite-svelte';
 </script>
diff --git a/src/routes/docs/forms/radio.md b/src/routes/docs/forms/radio.md
index d6767fa4e..a972bfa77 100644
--- a/src/routes/docs/forms/radio.md
+++ b/src/routes/docs/forms/radio.md
@@ -156,7 +156,7 @@ Use this example to show a list of radio items grouped inside a card.
 
 Use this example to show a list of radio items inside a card horizontally.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { Radio } from 'flowbite-svelte';
 </script>
@@ -204,7 +204,7 @@ Here’s an example of a list group that you can use right away.
 
 You can align the radio elements horizontally by using a wrapper tag and applying the flex class.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Radio } from 'flowbite-svelte';
   let inline1 = 'second';
@@ -220,7 +220,7 @@ You can align the radio elements horizontally by using a wrapper tag and applyin
 
 You can use the property `inline` as the alternative.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Radio } from 'flowbite-svelte';
   let inline2 = 'third';
@@ -234,7 +234,7 @@ You can use the property `inline` as the alternative.
 
 ## Colors
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Radio } from 'flowbite-svelte';
   let colors;
@@ -255,7 +255,7 @@ You can use the property `inline` as the alternative.
 
 Use this example of an advanced layout of radio elements where the label parent element can be styled when the radio is checked.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Radio } from 'flowbite-svelte';
   import { ArrowRightOutline } from 'flowbite-svelte-icons';
diff --git a/src/routes/docs/forms/textarea.md b/src/routes/docs/forms/textarea.md
index fe4848788..c241ed270 100644
--- a/src/routes/docs/forms/textarea.md
+++ b/src/routes/docs/forms/textarea.md
@@ -99,7 +99,7 @@ Most often the textarea component is used as the main text field input element i
 
 If you want to build a chatroom component you will usually want to use a textarea element to allow users to write multi-line chunks of text.
 
-```svelte example class="space-y-4"
+```svelte example class="space-y-4" hideResponsiveButtons
 <script>
   import { Textarea, Alert, ToolbarButton } from 'flowbite-svelte';
   import { ImageOutline, FaceGrinOutline, PapperPlaneOutline } from 'flowbite-svelte-icons';
diff --git a/src/routes/docs/forms/toggle.md b/src/routes/docs/forms/toggle.md
index 9351facf5..b89a485a3 100644
--- a/src/routes/docs/forms/toggle.md
+++ b/src/routes/docs/forms/toggle.md
@@ -43,7 +43,7 @@ Get started with the default toggle component example as a checkbox element to r
 
 ## Colors
 
-```svelte example class="flex justify-between" hideScript
+```svelte example class="flex justify-between" hideScript hideResponsiveButtons
 <script>
   import { Toggle } from 'flowbite-svelte';
 </script>
diff --git a/src/routes/docs/typography/blockquote.md b/src/routes/docs/typography/blockquote.md
index 3e4ad8546..76f41a9fd 100644
--- a/src/routes/docs/typography/blockquote.md
+++ b/src/routes/docs/typography/blockquote.md
@@ -65,7 +65,7 @@ Use this example to show an icon above the blockquote text content.
 
 Use this example to show a blockquote component between multiple paragraph elements.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Blockquote, P } from 'flowbite-svelte';
 </script>
diff --git a/src/routes/docs/typography/heading.md b/src/routes/docs/typography/heading.md
index ad4f38a06..0bbc9f57c 100644
--- a/src/routes/docs/typography/heading.md
+++ b/src/routes/docs/typography/heading.md
@@ -31,7 +31,7 @@ At least one unique H1 tag should be available for each page on your website wit
 
 Use this example of a H1 heading in the context of a paragraph and CTA button for landing pages.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Heading, P, Button } from 'flowbite-svelte';
   import { ArrowRightOutline } from 'flowbite-svelte-icons';
diff --git a/src/routes/docs/typography/image.md b/src/routes/docs/typography/image.md
index 633c86c2a..61680c933 100644
--- a/src/routes/docs/typography/image.md
+++ b/src/routes/docs/typography/image.md
@@ -57,7 +57,7 @@ Apply rounded corners to the image by using the specific utility classes from Ta
 
 Use this example to apply rounded corners to the image by using the rounded-size class where the size can be anything from small to extra large.
 
-```svelte example class="flex justify-center" hideScript
+```svelte example class="flex justify-center" hideScript hideResponsiveButtons
 <script>
   import { Img } from 'flowbite-svelte';
 </script>
@@ -69,7 +69,7 @@ Use this example to apply rounded corners to the image by using the rounded-size
 
 Use this example to mask the image inside a circle using the rounded-full utility class from Tailwind CSS.
 
-```svelte example class="flex justify-center" hideScript
+```svelte example class="flex justify-center" hideScript hideResponsiveButtons
 <script>
   import { Img } from 'flowbite-svelte';
 </script>
@@ -81,7 +81,7 @@ Use this example to mask the image inside a circle using the rounded-full utilit
 
 This example can be used to show a shadow effect for the image using the shadow-size utility class.
 
-```svelte example class="flex justify-center" hideScript
+```svelte example class="flex justify-center" hideScript hideResponsiveButtons
 <script>
   import { Img } from 'flowbite-svelte';
 </script>
@@ -121,7 +121,7 @@ Use image effects such as grayscale or blur to change the appearances of the ima
 
 Use the filter option and apply a grayscale to the image element using the grayscale class.
 
-```svelte example class="flex justify-center" hideScript
+```svelte example class="flex justify-center" hideScript hideResponsiveButtons
 <script>
   import { Img } from 'flowbite-svelte';
 </script>
@@ -133,7 +133,7 @@ Use the filter option and apply a grayscale to the image element using the grays
 
 Apply a blur by using the blur-size utility class from Tailwind CSS to an image component.
 
-```svelte example class="flex justify-center" hideScript
+```svelte example class="flex justify-center" hideScript hideResponsiveButtons
 <script>
   import { Img } from 'flowbite-svelte';
 </script>
@@ -149,7 +149,7 @@ Align the image component to the left, center or right side of the document page
 
 By default, the image component will be aligned to the left side of the page.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { Img } from 'flowbite-svelte';
 </script>
@@ -161,7 +161,7 @@ By default, the image component will be aligned to the left side of the page.
 
 Horizontally align the image to the center of the page using the `mx-auto` class.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { Img } from 'flowbite-svelte';
 </script>
@@ -173,7 +173,7 @@ Horizontally align the image to the center of the page using the `mx-auto` class
 
 Use the `ml-auto` class to align the image to the right side of the page.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { Img } from 'flowbite-svelte';
 </script>
@@ -189,7 +189,7 @@ Set the size of the image using the w-size and h-size or max-w-size utility clas
 
 Use the `max-w-xs` class to set a small size of the image.
 
-```svelte example class="flex justify-center" hideScript
+```svelte example class="flex justify-center" hideScript hideResponsiveButtons
 <script>
   import { Img } from 'flowbite-svelte';
 </script>
@@ -201,7 +201,7 @@ Use the `max-w-xs` class to set a small size of the image.
 
 Use the `max-w-md` class to set a medium size of the image.
 
-```svelte example class="flex justify-center" hideScript
+```svelte example class="flex justify-center" hideScript hideResponsiveButtons
 <script>
   import { Img } from 'flowbite-svelte';
 </script>
@@ -213,7 +213,7 @@ Use the `max-w-md` class to set a medium size of the image.
 
 Use the max-w-xl class to set a large size of the image.
 
-```svelte example class="flex justify-center" hideScript
+```svelte example class="flex justify-center" hideScript hideResponsiveButtons
 <script>
   import { Img } from 'flowbite-svelte';
 </script>
diff --git a/src/routes/docs/typography/paragraph.md b/src/routes/docs/typography/paragraph.md
index 7e4277768..101926fad 100644
--- a/src/routes/docs/typography/paragraph.md
+++ b/src/routes/docs/typography/paragraph.md
@@ -163,7 +163,7 @@ Use this example to show multiple paragraphs on a single line.
 
 Use this example to separate paragraphs into two columns for better readability.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { P, Layout } from 'flowbite-svelte';
 </script>
@@ -180,7 +180,7 @@ Use this example to separate paragraphs into two columns for better readability.
 
 This example can be used to separate paragraphs into three separate columns.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { P, Layout } from 'flowbite-svelte';
 </script>
@@ -198,7 +198,7 @@ This example can be used to separate paragraphs into three separate columns.
 
 Use this example to separate paragraphs into two uneven columns.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { P, Layout } from 'flowbite-svelte';
 </script>
diff --git a/src/routes/docs/typography/text.md b/src/routes/docs/typography/text.md
index 05e152cc0..8287ad0b9 100644
--- a/src/routes/docs/typography/text.md
+++ b/src/routes/docs/typography/text.md
@@ -28,7 +28,7 @@ Get started with a collection of text customization examples to learn how to upd
 
 Use this example to set the font size of inline text elements using the `size` prop.
 
-```svelte example class="flex flex-wrap items-center space-x-4"
+```svelte example class="flex flex-wrap items-center space-x-4" hideResponsiveButtons
 <script>
   import { P } from 'flowbite-svelte';
 </script>
@@ -52,7 +52,7 @@ Use this example to set the font size of inline text elements using the `size` p
 
 This example can be used to the font weight of an inline text element using the `weight` prop.
 
-```svelte example class="flex flex-wrap items-center space-x-4" hideScript
+```svelte example class="flex flex-wrap items-center space-x-4" hideScript hideResponsiveButtons
 <script>
   import { P } from 'flowbite-svelte';
 </script>
@@ -72,7 +72,7 @@ This example can be used to the font weight of an inline text element using the
 
 Use the `color` prop to set the color of the inline text.
 
-```svelte example class="flex flex-wrap items-center space-x-4" hideScript
+```svelte example class="flex flex-wrap items-center space-x-4" hideScript hideResponsiveButtons
 <script>
   import { P } from 'flowbite-svelte';
 </script>
@@ -88,7 +88,7 @@ Use the `color` prop to set the color of the inline text.
 
 Increase or decrease the spacing between letters using the `space` prop.
 
-```svelte example class="flex flex-wrap items-center space-x-4" hideScript
+```svelte example class="flex flex-wrap items-center space-x-4" hideScript hideResponsiveButtons
 <script>
   import { P } from 'flowbite-svelte';
 </script>
@@ -107,7 +107,7 @@ Increase or decrease the spacing between letters using the `space` prop.
 
 Update the text decoration style using the `underline` and `decorationClass` props.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { P, Span } from 'flowbite-svelte';
 </script>
@@ -121,7 +121,7 @@ Update the text decoration style using the `underline` and `decorationClass` pro
 
 Set a strikethrough line on a text element using the `line-through` class.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { Span } from 'flowbite-svelte';
 </script>
@@ -133,7 +133,7 @@ Set a strikethrough line on a text element using the `line-through` class.
 
 Force uppercase characters for a given portion of text using the uppercase class.
 
-```svelte example
+```svelte example hideResponsiveButtons
 <script>
   import { P, Span } from 'flowbite-svelte';
 </script>
@@ -149,7 +149,7 @@ Set italic or non italic styles with the props.
 
 Use the `italic` prop to set italic font style to a text element.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { P } from 'flowbite-svelte';
 </script>
@@ -161,7 +161,7 @@ Use the `italic` prop to set italic font style to a text element.
 
 Text elements by default are non-italic.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { P } from 'flowbite-svelte';
 </script>
@@ -177,7 +177,7 @@ Set the height between lines using the `height` prop.
 
 Use the `height="normal"` (default) prop to set default line height.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { P } from 'flowbite-svelte';
 </script>
@@ -189,7 +189,7 @@ Use the `height="normal"` (default) prop to set default line height.
 
 Use the `height="relaxed"` prop to increase the space between lines.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { P } from 'flowbite-svelte';
 </script>
@@ -201,7 +201,7 @@ Use the `height="relaxed"` prop to increase the space between lines.
 
 Use the `height="loose"` prop to set a large amount of space between text lines.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { P } from 'flowbite-svelte';
 </script>
@@ -213,7 +213,7 @@ Use the `height="loose"` prop to set a large amount of space between text lines.
 
 ### Left
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { P } from 'flowbite-svelte';
 </script>
@@ -223,7 +223,7 @@ Use the `height="loose"` prop to set a large amount of space between text lines.
 
 ### Center
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { P } from 'flowbite-svelte';
 </script>
@@ -235,7 +235,7 @@ Use the `height="loose"` prop to set a large amount of space between text lines.
 
 Use the `align="right"` prop to align the text element to the right side of the page.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { P } from 'flowbite-svelte';
 </script>
@@ -247,7 +247,7 @@ Use the `align="right"` prop to align the text element to the right side of the
 
 Use the `justify` prop to justify the text content.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { P } from 'flowbite-svelte';
 </script>
@@ -263,7 +263,7 @@ Configure the whitespace behaviour of inline text elements using the `whitespace
 
 Use the `whitespace="normal"` prop to set the default whitespace behaviour.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { P } from 'flowbite-svelte';
 </script>
@@ -275,7 +275,7 @@ Use the `whitespace="normal"` prop to set the default whitespace behaviour.
 
 Use the `whitespace="nowrap"` prop to prevent text being added to a new line when the full width has been reached.
 
-```svelte example class="overflow-y-scroll" hideScript
+```svelte example class="overflow-y-scroll" hideScript hideResponsiveButtons
 <script>
   import { P } from 'flowbite-svelte';
 </script>
@@ -288,7 +288,7 @@ Use the `whitespace="nowrap"` prop to prevent text being added to a new line whe
 Use the `whitespace="preline'` prop to add whitespace exactly how it has been set from the source code.
 
 <!-- prettier-ignore -->
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { P } from 'flowbite-svelte'
 </script>
@@ -304,7 +304,7 @@ Use the `whitespace="preline'` prop to add whitespace exactly how it has been se
 
 Update the text decoration style using the `underline` and `decorationClass` props.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { P, Span } from 'flowbite-svelte';
 </script>
@@ -318,7 +318,7 @@ Update the text decoration style using the `underline` and `decorationClass` pro
 
 Use the `opacity` and `color` prop to set the opacity of inline text elements.
 
-```svelte example hideScript
+```svelte example hideScript hideResponsiveButtons
 <script>
   import { P } from 'flowbite-svelte';
 </script>