Scaffold ButtonsWill you be my button?
- Basic Buttons
- Custom Buttons
- Hamburger Button
- Theme Button
- WhatsApp Share
- Basic Button API
- Custom Button API
svelte
Loading...You may also customize it via the style prop. To avoid side effects, use the unstyled prop.
svelte
Loading...Form Submission Example
svelte
Loading...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...svelte
Loading...Component API
| Prop | Type | Default |
|---|---|---|
| width | string | 30px |
| height | string | 3px |
| color | string | black |
| bradius | string | 5px |
| spacing | string | 5px |
The theme button directly manipulates the Theme Store.
svelte
Loading...When clicked, the button will attempt to share the link on WhatsApp. Your website information is best displayed if Open Graph (OG) tags are configured.
If the share fails, it falls back to copying the link.
svelte
Loading...Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| 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. |
| style | string (Vanilla CSS) | "" | Custom CSS styles for the button. |
| unstyled | boolean | false | When set to true, removes all default styling from the button. |
| 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. |
Component API
| Import Name | Prop | Default |
|---|---|---|
| ButtonSwipe | bg | var(--ss-neutral) |
| color | var(--ss-d-p) | |
| swipeColor | var(--ss-l-p) | |
| ButtonMarquee | bg | var(--ss-neutral) |
| color | var(--ss-d-p) | |
| ButtonFlip | front | front |
| back | back | |
| bgFront & bgBack | var(--ss-neutral) | |
| color | var(--ss-l-p) |
Edit Page