Buttons

Import a button component in the script tag.

<script>
	import { Button } from 'flowbite-svelte';
</script>

Types

The default `type` is set to `button`. You can chage it by using the `type` prop.

<Button type="submit">Submit</Button>

Sizes

<Button textSize="text-xs">Button text-xs</Button>
<Button textSize="text-sm">Button text-sm</Button>
<Button textSize="text-base">Button text-base</Button>
<Button textSize="text-lg">Button text-lg</Button>
<Button textSize="text-xl">Button text-xl</Button>
<Button textSize="text-2xl">Button text-2xl</Button>
<Button textSize="text-3xl">Button text-3xl</Button>
<Button textSize="text-4xl">Button text-4xl</Button>

Colors

<Button textSize="text-sm">Button</Button>
<Button textSize="text-sm" btnColor="dark">Button</Button>
<Button textSize="text-sm" btnColor="light">Button</Button>
<Button textSize="text-sm" btnColor="red">Button</Button>
<Button textSize="text-sm" btnColor="green">Button</Button>
<Button textSize="text-sm" btnColor="yellow">Button</Button>
<Button textSize="text-sm" btnColor="purple">Button</Button>

Handlers

You can use on:click or any standard on:* to listen to the event.

<script>
	import { Button } from 'flowbite-svelte';
	import { goto } from '$app/navigation';
	const btn1 = () => {
		alert('This redirects to the home page.');
		goto('/');
	};
	const btn2 = () => {
		alert('You clicked btn2.');
	};
</script>

<Button on:click={btn1} textSize="text-xs">Button text-xs</Button>
<Button on:click={btn2} textSize="text-xl">Button text-xl</Button>

Icons & Labels

Since all the buttons have a `slot` you can add an icon component to create an icon button.

<script>
	import { ArrowRightOutline, BellOutline, ShoppingCartOutline, ChevronRightOutline } from 'svelte-heros';
</script>

<Button>
    <ArrowRightOutline/>
</Button>
<Button>
  <BellOutline size="24" class="text-red-500 dark:text-purple-300" />
</Button>
<Button btnColor="red" >
  <BellOutline size="24" class="text-red-500 dark:text-purple-300" />
</Button>
<Button btnColor="green">
  <ShoppingCartOutline size="24"/> Buy Now
</Button>
<Button>
  Choose Plan <ChevronRightOutline size="24" class="text-gray-500 dark:text-gray-300" />
</Button>
<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>

Disabled

You can add any additional button attributes. The following example shows adding the `disabled` attribute.

<Button disabled>Button disabled</Button>

Props

The component has the following props, type, and default values. See types page for type information.

Related components

References