Getting started with Button Component
Import a button component in the script tag.
<script>
import { Button } from "flowbite-svelte";
</script>Button types
The default `type` is set to `button`. You can chage it by using the `type` prop.
<Button type="submit" name="Submit" />Button handler
You can use on:click to listen to the event. Add your event handler.
<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 name="Button text-xs" on:click={btn1} textSize="text-xs" />
<Button name="Button text-xs" on:click={btn2} textSize="text-xs" />Additional button attributes
You can add any additional button attributes. The following example shows adding the `disabled` attribute.
<Button name="Button disabled" disabled />Icon button
Since all the buttons have the `slot` you can add an icon component to create an icon button.
<script>
import { BellOutline } from "svelte-heros";
</script>
<Button name="">
<BellOutline size="24" class="text-red-500 dark:text-purple-300" />
</Button>
<Button name="" btnColor="red" >
<BellOutline size="24" class="text-red-500 dark:text-purple-300" />
</Button>