Button
Interactive button component with multiple variants and sizes. Supports rendering as a link when href is provided.
Installation
typescript
import { Button } from '@happyvertical/smrt-svelte';Basic Usage
The default button with primary styling.
svelte
<Button>Click me</Button>Variants
Choose from primary, secondary, ghost, or danger styles.
svelte
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>Sizes
Three size options: small, medium (default), and large.
svelte
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>Disabled State
Use disabled to prevent user interaction.
svelte
<Button disabled>Disabled</Button>
<Button variant="secondary" disabled>Disabled</Button>As Link
Provide href to render as an anchor element with button styling.
svelte
<Button href="/components">Go to Components</Button>
<Button href="https://github.com" variant="secondary">GitHub</Button>Interactive Example
Click the button to see the counter update.
svelte
<script lang="ts">
let clickCount = $state(0);
</script>
<Button onclick={() => clickCount++}>
Clicked {clickCount} times
</Button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'ghost' | 'danger' | 'primary' | Visual style variant |
size | 'sm' | 'md' | 'lg' | 'md' | Button size |
href | string | - | If provided, renders as an anchor element |
disabled | boolean | false | Disables the button |
type | 'button' | 'submit' | 'reset' | 'button' | Button type for form submission |
onclick | () => void | - | Click handler |
HTML Attributes
Button extends HTMLButtonAttributes, so you can pass any standard HTML button
attribute like id, name, form, formaction, aria-*, and more.
svelte
<Button
id="submit-btn"
name="action"
form="my-form"
aria-label="Submit the form"
>
Submit
</Button>TypeScript
typescript
import { Button } from '@happyvertical/smrt-svelte';
import type { HTMLButtonAttributes } from 'svelte/elements';
import type { Snippet } from 'svelte';
type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
type ButtonSize = 'sm' | 'md' | 'lg';
// Button extends HTMLButtonAttributes, supporting all standard button attributes
interface Props extends Omit<HTMLButtonAttributes, 'class'> {
variant?: ButtonVariant;
size?: ButtonSize;
href?: string; // If provided, renders as <a> instead of <button>
children?: Snippet;
}