Buttons
1. Default Buttons
svelte
Loading...1. Customizing with Tailwind
You may also customize it using Tailwind via the style prop. To use your own color palette, set the color prop to "none".
svelte
Loading...2. Form Submission Example
svelte
Loading...2. 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, none) | 'primary' | Sets the color scheme, used with variant to determine visual appearance. |
| variant | string (contained, outlined) | 'contained' | Defines the button style variant. |
| style | string (Tailwind only) | "" | Tailwind utility classes for custom styling. |
| 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) |
Edit Page