# SvRepeatButton
A button that keeps firing while you hold it down - after an initial delay, then
at a steady interval.
`SvRepeatButton` is the press-and-hold primitive behind steppers, spinners, and
volume or seek controls. A single click fires `onclick` once; holding it fires
once immediately, waits `delay` ms, then repeats every `interval` ms until you
release, leave the button, or lift the pointer anywhere on the page. It shares
[SvButton](https://svgrid.com/docs/help/ui-components/sv-button/)'s visual language (variants and sizes) so it drops into
a toolbar unchanged.
Related: [SvButton](https://svgrid.com/docs/help/ui-components/sv-button/) · [SvButtonGroup](https://svgrid.com/docs/help/ui-components/sv-button-group/) · [Buttons & toggles overview](https://svgrid.com/docs/help/ui-components/buttons/)
## Installation
Add it with the CLI - this drops a ready-to-edit `SvRepeatButton` starter into your app:
Prefer to see it first? `npx @svgrid/ui try repeat-button` opens it in a throwaway sandbox - no project needed.
Or install the package and import it directly. `SvRepeatButton` ships free in
`@svgrid/grid` (dependency-free):
```ts
import { SvRepeatButton } from '@svgrid/grid'
```
## Example
> Live demo: Repeat button - https://svgrid.com/demos/306-repeat-button/
```svelte
(qty = Math.max(0, qty - 1))}>-{qty} (qty += 1)}>+
```
## Props
| Prop | Type | Default | Description |
| ----------- | ------------------------------------------------- | ------------- | ----------------------------------------------------------------- |
| `onclick` | `() => void` | - | Fires once per click, then repeatedly while held. |
| `delay` | `number` | `300` | Milliseconds to wait before repeats begin. |
| `interval` | `number` | `60` | Milliseconds between repeats (floored at 16ms). |
| `disabled` | `boolean` | `false` | Blocks clicks and repeats, and dims the control. |
| `size` | `sm` \| `md` \| `lg` | `md` | Padding and font size, shared with the rest of the kit. |
| `variant` | `primary` \| `secondary` \| `outline` \| `ghost` | `secondary` | Visual weight, matching [SvButton](https://svgrid.com/docs/help/ui-components/sv-button/). |
| `ariaLabel` | `string` | - | Accessible name for icon-only or glyph buttons. |
| `children` | `Snippet` | - | The button label. |
## Examples
### Number stepper
Pair two repeat buttons around a value so a long press ramps it quickly:
```svelte
(qty -= 1)} ariaLabel="Decrease">- (qty += 1)} ariaLabel="Increase">+
```
### Faster acceleration
Lower `delay` and `interval` for a control that ramps sooner and moves faster,
such as a seek or volume button:
```svelte
(volume += 1)}>Vol +
```
### Icon-only
Omit the label and pass `ariaLabel` so the button still announces:
```svelte
▼
```
### Zoom control with clamping
Because `onclick` runs on every repeat, clamp the value inside the handler so a
long hold stops cleanly at the limits instead of running past them:
```svelte
(zoom = clamp(zoom - 5))}>-{zoom}% (zoom = clamp(zoom + 5))}>+
```
## Accessibility
- Renders a native `