Default Buttons
svelte
Loading...You may also customize it using Tailwind via the style prop.
svelte
Loading...Custom Buttons
These buttons are not built to be as flexible compared to default buttons.
- They are designed to be used as-is, with minimal customization options.
- All have fixed dimensions (w × h), with Marquee as the exception. Marquee automatically adjusts its width based on text length.
svelte
Loading...Default Buttons Table
| 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. |
| style | string (Tailwind only) | "" | Tailwind utility classes for custom styling. Priority is given to variant |
| startIcon & endIcon | string (Font Awesome only) | "" | |
| disabled | boolean | false | Disables the button and blocks onClick actions. |
| isLoading | boolean | false | Displays a spinner. Automatically disables the button while loading. |
| 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) |
| html2canvas_ignore | string (true, false) | 'false' | When set to 'true', activates data-html2canvas-ignore to exclude the button from screenshots. |
Custom Buttons Table
| Import Name | Prop | Type | Default |
|---|---|---|---|
| ButtonSwipe | |||
| text | string | Button | |
| bg / color | string | var(--primary-bg)/ #4B5563 | |
| ButtonMarquee | |||
| text | string | Hover me | |
| bg / color | string | var(--primary-bg)/ #4B5563 | |
| ButtonFlip | |||
| front | string | front | |
| back | string | back | |
| bgFront | string | var(--primary-bg) | |
| bgBack / color | string | #f4e5d4 / var(--button-text) |