Default Buttons
svelte
Loading...You may also customize it using Tailwind via the style prop.
svelte
Loading...| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | '' | The button label content. |
| type | string (button, submit, reset) | 'button' | |
| onclick={() => your_function()} | function(s) | Function or functions triggered when the button is clicked. | |
| color | string (primary, warning, error) | 'primary' | Sets the color scheme, used with variant to determine visual appearance. |
| variant | string (contained, outlined) | 'contained' | Defines the button style variant. If used, it overrides any Tailwind styles passed via the style prop. |
| pill | boolean | false | If true, applies full rounding (Tailwind rounded-full) to make the button pill-shaped. |
| spinner | number | 20 | Controls the size of the loading spinner (in pixels) when isLoading is active. |
| thickness | number | 2 | Defines the stroke thickness of the spinner icon (applies when isLoading is active) |
| style | string (Tailwind only) | "" | Tailwind utility classes for custom styling. Priority is given to variant |
| disabled | boolean | false | Disables the button and blocks onClick actions. |
| isLoading | boolean | false | Displays a spinner. Automatically disables the button while loading. |
| html2canvas_ignore | string (true, false) | 'false' | When set to 'true', activates data-html2canvas-ignore to exclude the button from screenshots. |