Buttons

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 gradientMonochrome="blue">Blue</Button>
<Button gradientMonochrome="green">Green</Button>
<Button gradientMonochrome="cyan">Cyan</Button>
<Button gradientMonochrome="teal">Teal</Button>
<Button gradientMonochrome="lime">Lime</Button>
<Button gradientMonochrome="red">Red</Button>
<Button gradientMonochrome="pink">Pink</Button>
<Button gradientMonochrome="purple">Purple</Button>

Gradient duotone

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

<Button gradientDuoTone="purpleToBlue">Purple to Blue</Button>
<Button gradientDuoTone="cyanToBlue">Cyan to Blue</Button>
<Button gradientDuoTone="greenToBlue">Green to Blue</Button>
<Button gradientDuoTone="purpleToPink">Purple to Pink</Button>
<Button gradientDuoTone="pinkToOrange">Pink to Orange</Button>
<Button gradientDuoTone="tealToLime">Teal to Lime</Button>
<Button gradientDuoTone="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={true} gradientDuoTone="purpleToBlue">Purple to Blue</Button>
<Button outline={true} gradientDuoTone="cyanToBlue">Cyan to Blue</Button>
<Button outline={true} gradientDuoTone="greenToBlue">Green to Blue</Button>
<Button outline={true} gradientDuoTone="purpleToPink">Purple to Pink</Button>
<Button outline={true} gradientDuoTone="pinkToOrange">Pink to Orange</Button>
<Button outline={true} gradientDuoTone="tealToLime">Teal to Lime</Button>
<Button outline={true} gradientDuoTone="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 coloredShadow="blue">Blue</Button>
<Button coloredShadow="green">Green</Button>
<Button coloredShadow="cyan">Cyan</Button>
<Button coloredShadow="teal">Teal</Button>
<Button coloredShadow="lime">Lime</Button>
<Button coloredShadow="red">Red</Button>
<Button coloredShadow="pink">Pink</Button>
<Button coloredShadow="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 outlineStyle="default">Default</Button>
  <Button outlineStyle="dark">Dark</Button>
  <Button outlineStyle="green">Green</Button>
  <Button outlineStyle="red">Red</Button>
  <Button outlineStyle="yellow">Yellow</Button>
  <Button outlineStyle="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 icon={ArrowRight} />
<Button icon={ArrowRight} pill={true} />
<Button icon={ArrowRight} outline={true} />
<Button icon={ArrowRight} pill={true} outline={true} />
</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