Button

Import a button component in the script tag.

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

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('You clicked btn1.');
	};
	const btn2 = () => {
		alert('You clicked btn2.');
	};
</script>

<Button on:click="{btn1}">Button 1</Button>
<Button on:click="{btn2}">Button 2</Button>

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.

<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>

Button pills

<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>

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.

<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>

Gradient duotone

These buttons use a style that includes two contrasted colors creating an impressive mesh gradient effect.

<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>

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.

<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>

Colored shadows

These beautiful button elements with color shadows can be used since the release of Tailwind v3.0.

<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>

Outline buttons

Use the following button styles to show the colors only for the border of the element.

<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>

Button sizes

<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>

Buttons with icon

Use the following examples to add a SVG icon inside the button either on the left or right side.

<Button><ShoppingCart size="18" class="mr-2" /> Buy Now</Button>
<Button>Choose Plan <ArrowRight size="18" class="ml-2" /></Button>

Button with label

This example can be used to show a notification count or helper text inside a button using the badge element.

<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>

Icon buttons

Sometimes you need a button to indicate an action using only an icon.

<script>
	import { ArrowRight } from 'svelte-heros';
</script>

<div class="flex flex-wrap items-center gap-2">
	<Button class="!p-2"><ArrowRight class="w-5 h-5" /></Button>
	<Button pill="{true}" class="!p-2"><ArrowRight class="w-5 h-5" /></Button>
	<Button outline="{true}" class="!p-2"><ArrowRight class="w-5 h-5" /></Button>
	<Button pill="{true}" class="!p-2" outline="{true}"><ArrowRight class="w-5 h-5" /></Button>
</div>

Loader

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.

References