Will you be my button?
- Default Buttons
- Custom Buttons
- Hamburger Button View the Prebuilt Hamburger Menu
- Theme Button
- Item Selected & Close
svelte
Loading...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...Form Submission Example
svelte
Loading...Component API
| 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) | "" | Icons to display at the start or end of the button. |
| 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. |
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...Component API
| 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) |
svelte
Loading...Component API
| Prop | Type | Default |
|---|---|---|
| barWidth | string | 30px |
| barHeight | string | 3px |
| barColor | string | black |
| barBorderRadius | string | 5px |
| barSpacing | string | 5px |
The theme button directly manipulates the Theme Store.
svelte
Loading...Edit Page