# Buttons & toggles
Press and toggle primitives. All take a `size` (`sm` | `md` | `lg`) and theme
from `--sg-*`.
## Installation
Add any component with the CLI (drops a ready-to-edit starter into your app) - or
add the whole family at once:
Prefer to see them first? `npx @svgrid/ui try buttons` opens the whole family in a sandbox - no project needed.
They all ship free in the `@svgrid/grid` package, so you can also install it and
import them directly:
## SvButton
The examples on this page import from `@svgrid/grid`:
```svelte
```
```svelte
Save
Saving…
```
Props: `variant` (`primary` `secondary` `outline` `ghost` `danger`), `size`,
`loading`, `disabled`, `block`, `href` (renders an anchor), `icon` snippet,
`onclick`.
## SvRepeatButton
Fires `onclick` repeatedly while held (after `delay`, then every `interval` ms).
Used for steppers and spinners.
```svelte
count++}>+
```
Props: `onclick`, `delay` (default 300), `interval` (default 60), `variant`,
`size`, `disabled`.
## SvToggleButton
A button with a pressed on/off state (`aria-pressed`).
```svelte
(bold = v)}>B
```
Props: `pressed`, `onChange(pressed)`, `size`, `disabled`.
## SvSwitchButton
An on/off sliding switch (ARIA `switch`), keyboard togglable.
```svelte
(on = v)} />
```
Props: `checked`, `onChange(checked)`, `size`, `onLabel` / `offLabel`, `disabled`.
## SvCheckBox
Checkbox with an indeterminate state and optional label child.
```svelte
(agree = v)}>I agree
```
Props: `checked`, `indeterminate`, `onChange(checked)`, `size`, `disabled`.
## SvRadioGroup
An accessible radio group with roving tabindex + arrow-key navigation.
```svelte
(plan = v)} orientation="horizontal" />
```
Props: `options` ({ value, label, disabled? }), `value`, `onChange(value)`,
`orientation` (`vertical` | `horizontal`), `size`, `disabled`.
## SvRating
A star rating (ARIA slider) with hover preview, half steps and keyboard.
```svelte
(stars = v)} allowHalf />
```
Props: `value`, `onChange(value)`, `max` (default 5), `allowHalf`, `readOnly`,
`size`, `disabled`. Uses the grid's `--sg-rating-*` tokens.
## Component guides
Each component has its own full tutorial with props, keyboard behaviour and
recipes:
- [SvButton](https://svgrid.com/docs/help/ui-components/sv-button/) - the press primitive with variants, loading and icons.
- [SvButtonGroup](https://svgrid.com/docs/help/ui-components/sv-button-group/) - a segmented button bar or view switcher.
- [SvRepeatButton](https://svgrid.com/docs/help/ui-components/sv-repeat-button/) - fires repeatedly while held, for steppers.
- [SvToggleButton](https://svgrid.com/docs/help/ui-components/sv-toggle-button/) - a button with a pressed on/off state.
- [SvSwitchButton](https://svgrid.com/docs/help/ui-components/sv-switch-button/) - an on/off sliding switch control.
- [SvCheckBox](https://svgrid.com/docs/help/ui-components/sv-check-box/) - a checkbox with an indeterminate state.
- [SvRadioGroup](https://svgrid.com/docs/help/ui-components/sv-radio-group/) - an accessible single-choice radio group.
- [SvRating](https://svgrid.com/docs/help/ui-components/sv-rating/) - a star rating with half steps.
## More examples
### Buttons & toggles
The UI kit press/toggle primitives: SvButton (variants/sizes/loading), SvRepeatButton (hold-to-repeat), SvToggleButton, SvSwitchButton, SvCheckBox (+ indeterminate), SvRadioGroup (arrow-key nav) and SvRating (half stars). Theme-driven, standalone or as grid cell controls.
> Live demo: Buttons & toggles - https://svgrid.com/demos/253-buttons-toggles/
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/ui-components/buttons/ . All docs: https://svgrid.com/llms.txt