.
---
import { QuantitySwitch } from '@yatoday/astro-ui/svelte';
---
<QuantitySwitch readonly step={1} max={100} label="" value={10} />
<QuantitySwitch readonly size="lg" label="" step={1} max={100} value={10} variant="primary" />
<QuantitySwitch readonly size="lg" label="" step={1} max={100} value={10} variant="accent" />
<QuantitySwitch readonly size="lg" label="" step={1} max={100} value={10} variant="destructive" />
<QuantitySwitch readonly size="lg" label="" step={1} max={100} value={10} variant="outline" />
<QuantitySwitch readonly size="lg" label="" step={1} max={100} value={10} variant="ghost" />
<!-- With Astro -->
<QuantitySwitch
client:only="svelte"
...
/>| Prop | Type | Default | Description |
|---|---|---|---|
variant | default | primary | accent | destructive | outline | ghost | default | For more details, see the Button component |
size | default | sm | lg | default | - |
class | string | - | - |
@theme {
--shadow-input: 0 0 0 1px var(--yt-color-border);
}