Components demo

Svelte 5 - Component Demo Page

Buttons

variant="primary"

variant="secondary"

variant="ghost"

With Icon

States

Modal

Open modal

Icon Button

Sizes & Variants

States

Text Input

Interactive

Value: none

disabled=true

Dropdown

Interactive

Value: none

disabled=true

Checkbox

Interactive

Accept terms

disabled=true

Disabled off Disabled on

Radio

Interactive

Option A Option B

Value: a

disabled=true

Disabled on Disabled off

Loading

Sizes

With Label

Loading...

Hamburger

Sizes (Interactive)

MD Open: false

Form

Standard

Disabled

Toast

Programmatic

Icon

name / size

Clickable / Color / Custom Class

Slider (Volume Dial)

Custom Slider component

Native input type="range"

Value: 50

Slider (Vertical)

Value: 50

Pattern

decorative