Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3

Button

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.

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 change it by using the `type` prop.

Button with link

You can add a link to a Button component:

Button pills

The button pills can be used as an alternative style by using fully rounded edges.

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.

Gradient duotone

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

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.

Colored shadows

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

Outline buttons

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

Button sizes with icons

Use these examples if you want to use smaller or larger buttons.

Button with icon

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

Button with label

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

Icon buttons

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

Loader

Use the spinner components from Flowbite-Svelte to indicate a loader animation inside buttons.

Disabled

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

Events

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