👋 FYI, this note is over 6 months old. Some of the content may be out of date.
On this page

How to extend prop types from HTML elements Jump to heading

For everyone who wants to create a wrapper component around a certain HTML element and wants a way to type “this component accepts all properties of X”, here’s how you do it as of Svelte version 3.55:

<script lang="ts">
import type { HTMLButtonAttributes } from 'svelte/elements'
interface $$Props extends HTMLButtonAttributes {
error: boolean // your own additional typings

export let error: boolean
// ...

<!-- ... -->
<slot />


Adding classes conditionally Jump to heading

<!-- Button.svelte -->
export let primary = false
export let secondary = false


<Button secondary="{true}">Click me</Button>

← Back home