flowbite-svelte 0.27.15 → 0.27.16

package/src/routes/components/button-group.md

@@ -1,225 +0,0 @@
----
-layout: componentLayout
-title: Svelte Button Group - Flowbite
-breadcrumb_title: Button group
-dir: Components
-description: Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line
----
-
-<MetaTag {breadcrumb_title} {title} {dir} {description}/>
-
-<script>
-  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
-  import { Breadcrumb, BreadcrumbItem, Badge, Heading, P, A } from '$lib'
-  // Props table
-  import { props as buttonGroupProps} from '../props/ButtonGroup.json'
-  let propHeader = ['Name', 'Type', 'Default']
-  let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
-  let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
-</script>
-
-<Breadcrumb class="pt-16 py-8">
-  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
-  <BreadcrumbItem>{dir}</BreadcrumbItem>
-  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
-</Breadcrumb>
-
-<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
-
-<CompoDescription>{description}</CompoDescription>
-
-<ExampleDiv>
-<GitHubSource href="buttongroups/ButtonGroup.svelte">ButtonGroup</GitHubSource>
-</ExampleDiv>
-
-The button group component from Flowbite-Svelte can be used to stack together multiple buttons and links inside a single element.
-
-<Htwo label="Setup" />
-
-```html
-<script>
-  import { ButtonGroup, Button } from 'flowbite-svelte';
-</script>
-```
-
-<Htwo label="Default" />
-
-Use the following code to stack together buttons into a single group.
-
-```svelte example hideScript
-<script>
-  import { ButtonGroup, Button } from 'flowbite-svelte';
-</script>
-<ButtonGroup>
-  <Button>Proflie</Button>
-  <Button>Settings</Button>
-  <Button>Messages</Button>
-</ButtonGroup>
-```
-
-<Htwo label="More examples" />
-
-```svelte example hideScript
-<script>
-  import { ButtonGroup, Button } from 'flowbite-svelte';
-</script>
-<div class="grid grid-cols-2 gap-4 w-fit text-gray-900 dark:text-gray-100">
-  <div>Pills</div>
-  <ButtonGroup class="space-x-px">
-    <Button pill color="purple">Proflie</Button>
-    <Button pill color="purple">Settings</Button>
-    <Button pill color="purple">Messages</Button>
-  </ButtonGroup>
-  <div>Standard buttons</div>
-  <ButtonGroup>
-    <Button color="red">Proflie</Button>
-    <Button color="green">Settings</Button>
-    <Button color="yellow">Messages</Button>
-  </ButtonGroup>
-  <div>Outline</div>
-  <ButtonGroup>
-    <Button outline color="red">Proflie</Button>
-    <Button outline color="green">Settings</Button>
-    <Button outline color="yellow">Messages</Button>
-  </ButtonGroup>
-  <div>Gradient with shadows</div>
-  <ButtonGroup>
-    <Button gradient shadow="green" color="green">Proflie</Button>
-    <Button gradient shadow="pink" color="pink">Settings</Button>
-    <Button gradient shadow="teal" color="teal">Messages</Button>
-  </ButtonGroup>
-  <div>Dualtone gradient</div>
-  <ButtonGroup class="space-x-px">
-    <Button gradient color="purpleToBlue">Profile</Button>
-    <Button gradient color="cyanToBlue">Settings</Button>
-    <Button gradient color="greenToBlue">Messages</Button>
-  </ButtonGroup>
-</div>
-```
-
-<Htwo label="Button group as links" />
-
-You can also use the button group component as links.
-
-```svelte example hideScript
-<script>
-  import { ButtonGroup, Button } from 'flowbite-svelte';
-</script>
-<ButtonGroup>
-  <Button href="/">Proflie</Button>
-  <Button href="/">Settings</Button>
-  <Button href="/">Messages</Button>
-</ButtonGroup>
-```
-
-<Htwo label="Group buttons with icons" />
-
-You can also use SVG icons inside the grouped buttons.
-
-```svelte example hideScript
-<script>
-  import { ButtonGroup, Button } from 'flowbite-svelte';
-</script>
-<ButtonGroup>
-  <Button>
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-2 text-purple-500 dark:text-green-500"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
-    Proflie
-  </Button>
-  <Button>
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-2 text-purple-500 dark:text-green-500"><path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" /></svg>
-    Settings
-  </Button>
-  <Button>
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-2 text-purple-500 dark:text-green-500"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9.75v6.75m0 0l-3-3m3 3l3-3m-8.25 6a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z" /></svg>
-    Messages
-  </Button>
-</ButtonGroup>
-```
-
-<Htwo label="Outline" />
-
-Group a series of buttons together on a single line or stack them in a vertical column.
-
-```svelte example hideScript
-<script>
-  import { ButtonGroup, Button } from 'flowbite-svelte';
-</script>
-<ButtonGroup>
-  <Button outline color="dark">Proflie</Button>
-  <Button outline color="dark">Settings</Button>
-  <Button outline color="dark">Messages</Button>
-</ButtonGroup>
-```
-
-<Htwo label="Outline with icon" />
-
-Group a series of buttons together on a single line or stack them in a vertical column.
-
-```svelte example hideScript
-<script>
-  import { ButtonGroup, Button } from 'flowbite-svelte';
-</script>
-<ButtonGroup>
-  <Button outline color="dark">
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-2 text-blue-500 dark:text-red-500"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
-    Proflie
-  </Button>
-  <Button outline color="dark">
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-2 text-blue-500 dark:text-red-500"><path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" /></svg>
-    Settings
-  </Button>
-  <Button outline color="dark">
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-2 text-blue-500 dark:text-red-500"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9.75v6.75m0 0l-3-3m3 3l3-3m-8.25 6a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z" /></svg>
-    Messages
-  </Button>
-</ButtonGroup>
-```
-
-<Htwo label="Events" />
-
-You can add the `on:click` event to the `Button` component.
-
-```svelte example
-<script>
-  import { ButtonGroup, Button } from 'flowbite-svelte';
-  	const handleClick = ()=> {
-		alert('Clicked')
-	}
-</script>
-<ButtonGroup>
-  <Button on:click={handleClick}>Click me</Button>
-  <Button>Settings</Button>
-  <Button>Messages</Button>
-</ButtonGroup>
-```
-
-<Htwo label="Props" />
-
-The component has the following props, type, and default values. See <A href="/pages/types">types page</A> for type information.
-
-<h3 class='text-xl w-full dark:text-white py-4'>ButtonGroup</h3>
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={buttonGroupProps} rowState='hover' />
-</TableProp>
-
-<Htwo label="Forwarded Events" />
-
-<div class="flex flex-wrap gap-2">
-<Badge large={true}>on:click</Badge>
-<Badge large={true}>on:change</Badge>
-<Badge large={true}>on:keydown</Badge>
-<Badge large={true}>on:keyup</Badge>
-<Badge large={true}>on:focus</Badge>
-<Badge large={true}>on:blur</Badge>
-<Badge large={true}>on:mouseenter</Badge>
-<Badge large={true}>on:mouseleave</Badge>
-</div>
-
-<Htwo label="References" />
-
-<P>
-  <A href="https://flowbite.com/docs/components/button-group/" target="_blank" rel="noreferrer" class="link"
-    >Flowbite Button Group</A
-  >
-</P>

package/src/routes/components/button.md

@@ -1,335 +0,0 @@
----
-layout: componentLayout
-title: Svelte Buttons - Flowbite
-breadcrumb_title: Buttons
-dir: Components
-description: Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows
----
-
-<MetaTag {breadcrumb_title} {title} {dir} {description}/>
-
-<script>
-  import {Htwo,ExampleDiv,GitHubSource,CompoDescription,TableProp, TableDefaultRow, MetaTag } from '../utils'
-  
-  import { Breadcrumb, BreadcrumbItem, Badge, Heading, P, A } from '$lib'
-  // Props table
-  import { props as buttonProps } from '../props/Button.json'
-  let propHeader = ['Name', 'Type', 'Default']
-  let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
-  let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
-  // slots
-  let slotHeader = ['Name', 'Description']
-  let slotItems = [['default', 'For a button label.']]
-
-</script>
-
-<Breadcrumb class="pt-16 py-8">
-  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
-  <BreadcrumbItem>{dir}</BreadcrumbItem>
-  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
-</Breadcrumb>
-
-<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
-
-<CompoDescription>{description}</CompoDescription>
-
-<ExampleDiv>
-<GitHubSource href="buttons/Button.svelte">Button</GitHubSource>
-</ExampleDiv>
-
-The button component is probably the most widely used element in any user interface or website as it can be used to launch an action but also to link to other pages.
-
-Flowbite-Svelte provides a large variety of styles and sizes for the button component including outlined buttons, multiple colors, sizes, buttons with icons, and more.
-
-<Htwo label="Setup" />
-
-Import a button component in the script tag.
-
-```html
-<script>
-  import { Button } from 'flowbite-svelte';
-</script>
-```
-
-<Htwo label="Default button" />
-
-Use these default button styles with multiple colors to indicate an action or link within your website. The default `type` is set to `button`. You can chage it by using the `type` prop.
-
-```svelte example class="flex flex-wrap gap-2" hideScript
-<script>
-  import { Button } from 'flowbite-svelte';
-</script>
-
-<Button>Default</Button>
-<Button color="alternative">Alternative</Button>
-<Button color="dark">Dark</Button>
-<Button color="light">Light</Button>
-<Button color="green">Green</Button>
-<Button color="red">Red</Button>
-<Button color="yellow">Yellow</Button>
-<Button color="purple">Purple</Button>
-```
-
-<Htwo label="Button with link" />
-
-You can add a link to a Button component:
-
-```svelte example class="flex flex-wrap gap-2" hideScript
-<script>
-  import { Button } from 'flowbite-svelte';
-</script>
-<Button href="/">Home</Button>
-```
-
-
-<Htwo label="Button pills" />
-
-The button pills can be used as an alternative style by using fully rounded edges.
-
-```svelte example class="flex flex-wrap gap-2" hideScript
-<script>
-  import { Button } from 'flowbite-svelte';
-</script>
-<Button pill={true}>Default</Button>
-<Button color="alternative" pill={true}>Alternative</Button>
-<Button color="dark" pill={true}>Dark</Button>
-<Button color="light" pill={true}>Light</Button>
-<Button color="green" pill={true}>Green</Button>
-<Button color="red" pill={true}>Red</Button>
-<Button color="yellow" pill={true}>Yellow</Button>
-<Button color="purple" pill={true}>Purple</Button>
-```
-
-<Htwo label="Gradient monochrome" />
-
-These beautifully colored buttons built with the gradient color stops utility classes from Tailwind CSS can be used as a creative alternative to the default button styles.
-
-```svelte example class="flex flex-wrap gap-2" hideScript
-<script>
-  import { Button } from 'flowbite-svelte';
-</script>
-<Button gradient color="blue">Blue</Button>
-<Button gradient color="green">Green</Button>
-<Button gradient color="cyan">Cyan</Button>
-<Button gradient color="teal">Teal</Button>
-<Button gradient color="lime">Lime</Button>
-<Button gradient color="red">Red</Button>
-<Button gradient color="pink">Pink</Button>
-<Button gradient color="purple">Purple</Button>
-```
-
-<Htwo label="Gradient duotone" />
-
-These buttons use a style that includes two contrasted colors creating an impressive mesh gradient effect.
-
-```svelte example class="flex flex-wrap gap-2" hideScript
-<script>
-  import { Button } from 'flowbite-svelte';
-</script>
-<Button gradient color="purpleToBlue">Purple to Blue</Button>
-<Button gradient color="cyanToBlue">Cyan to Blue</Button>
-<Button gradient color="greenToBlue">Green to Blue</Button>
-<Button gradient color="purpleToPink">Purple to Pink</Button>
-<Button gradient color="pinkToOrange">Pink to Orange</Button>
-<Button gradient color="tealToLime">Teal to Lime</Button>
-<Button gradient color="redToYellow">Red to Yellow</Button>
-```
-
-<Htwo label="Gradient outline" />
-
-This is a special button style that incorporates a gradient color for the outline that can be used as a secondary style to the fully colored gradient buttons.
-
-```svelte example class="flex flex-wrap gap-2" hideScript
-<script>
-  import { Button } from 'flowbite-svelte';
-</script>
-<Button outline gradient color="purpleToBlue">Purple to Blue</Button>
-<Button outline gradient color="cyanToBlue">Cyan to Blue</Button>
-<Button outline gradient color="greenToBlue">Green to Blue</Button>
-<Button outline gradient color="purpleToPink">Purple to Pink</Button>
-<Button outline gradient color="pinkToOrange">Pink to Orange</Button>
-<Button outline gradient color="tealToLime">Teal to Lime</Button>
-<Button outline gradient color="redToYellow">Red to Yellow</Button>
-```
-
-<Htwo label="Colored shadows" />
-
-These beautiful button elements with color shadows can be used since the release of Tailwind v3.0.
-
-```svelte example class="flex flex-wrap gap-2" hideScript
-<script>
-  import { Button } from 'flowbite-svelte';
-</script>
-<Button shadow="blue" gradient color="blue">Blue</Button>
-<Button shadow="green" gradient color="green">Green</Button>
-<Button shadow="cyan" gradient color="cyan">Cyan</Button>
-<Button shadow="teal" gradient color="teal">Teal</Button>
-<Button shadow="lime" gradient color="lime">Lime</Button>
-<Button shadow="red" gradient color="red">Red</Button>
-<Button shadow="pink" gradient color="pink">Pink</Button>
-<Button shadow="purple" gradient color="purple">Purple</Button>
-```
-
-<Htwo label="Outline buttons" />
-
-Use the following button styles to show the colors only for the border of the element.
-
-```svelte example class="flex flex-wrap gap-2" hideScript
-<script>
-  import { Button } from 'flowbite-svelte';
-</script>
-<div class="flex flex-wrap gap-2">
-  <Button outline>Default</Button>
-  <Button outline color="dark">Dark</Button>
-  <Button outline color="green">Green</Button>
-  <Button outline color="red">Red</Button>
-  <Button outline color="yellow">Yellow</Button>
-  <Button outline color="purple">Purple</Button>
-</div>
-```
-
-<Htwo label="Button sizes" />
-
-Use these examples if you want to use smaller or larger buttons.
-
-```svelte example class="gap-2" hideScript
-<script>
-  import { Button } from 'flowbite-svelte';
-</script>
-<Button size="xs">Extra small</Button>
-<Button size="sm">Small</Button>
-<Button size="md">Base</Button>
-<Button size="lg">Large</Button>
-<Button size="xl">Extra large</Button>
-```
-
-<Htwo label="Buttons with icon" />
-
-Use the following examples to add a SVG icon inside the button either on the left or right side.
-
-```svelte example class="flex flex-wrap gap-2" hideScript
-<script>
-  import { Button } from 'flowbite-svelte';
-</script>
-<Button>
-  <svg aria-hidden="true" class="mr-2 -ml-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg> Buy Now
-</Button>
-<Button>
-  Choose Plan <svg aria-hidden="true" class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-</Button>
-```
-
-<Htwo label="Button with label" />
-
-This example can be used to show a notification count or helper text inside a button using the badge element.
-
-```svelte example class="flex flex-wrap gap-2" hideScript
-<script>
-  import { Button } from 'flowbite-svelte';
-</script>
-<Button>
-  Messages
-  <span class="inline-flex items-center justify-center w-4 h-4 ml-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full">
-    2
-  </span>
-</Button>
-```
-
-<Htwo label="Icon buttons" />
-
-Sometimes you need a button to indicate an action using only an icon.
-
-```svelte example class="flex flex-wrap gap-2" hideScript
-<script>
-  import { Button } from 'flowbite-svelte';
-</script>
-<div class="flex flex-wrap items-center gap-2">
-  <Button class="!p-2"><svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
-  <Button pill={true} class="!p-2"><svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
-  <Button outline={true} class="!p-2" size="lg"><svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
-  <Button pill={true} outline={true} class="!p-2" size="xl"><svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
-</div>
-```
-
-<Htwo label="Loader" />
-
-Use the spinner components from Flowbite-Svelte to indicate a loader animation inside buttons.
-
-```svelte example class="flex flex-wrap gap-2"
-<script>
-  import { Button, Spinner } from 'flowbite-svelte';
-</script>
-<Button>
-  <Spinner class="mr-3" size="4" color="white" />Loading ...
-</Button>
-<Button color="alternative">
-  <Spinner class="mr-3" size="4" />Loading ...
-</Button>
-```
-
-<Htwo label="Disabled" />
-
-You can add any additional button attributes. The following example shows adding the `disabled` attribute.
-
-```svelte example class="flex flex-wrap gap-2" hideScript
-<script>
-  import { Button } from 'flowbite-svelte';
-</script>
-<Button disabled >Disabled</Button>
-```
-
-<Htwo label="Events" />
-
-You can use on:click or any standard on:* to listen to the event.
-
-```svelte example class="flex flex-wrap gap-2"
-<script>
-  import { Button } from 'flowbite-svelte';
-  const btn1 = () => {
-    alert('You clicked btn1.');
-  };
-  const btn2 = () => {
-    alert('You clicked btn2.');
-  };
-</script>
-<Button on:click={btn1}>Button 1</Button>
-<Button on:click={btn2}>Button 2</Button>
-```
-
-<Htwo label="Props" />
-
-The component has the following props, type, and default values. See <A href="/pages/types">types 
- page</A> for type information.
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-<TableDefaultRow items={buttonProps} rowState='hover' />
-</TableProp>
-
-<h3 class='text-xl w-full dark:text-white py-4'>Custom CSS</h3>
-
-Use `btnClass` to overwrite Button class.
-
-<Htwo label="Slots" />
-
-<TableProp header={slotHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={slotItems} rowState='hover' />
-</TableProp>
-
-<Htwo label="Forwarded Events" />
-
-<div class="flex flex-wrap gap-2">
-<Badge large={true}>on:change</Badge>
-<Badge large={true}>on:click</Badge>
-<Badge large={true}>on:keydown</Badge>
-<Badge large={true}>on:keyup</Badge>
-<Badge large={true}>on:mouseenter</Badge>
-<Badge large={true}>on:mouseleave</Badge>
-</div>
-
-<Htwo label="References" />
-
-<P>
-  <A href="https://flowbite.com/docs/components/buttons/" target="_blank" rel="noreferrer" class="link"
-    >Flowbite Buttons</A
-  >
-</P>