# @smui/button

> Svelte Material UI - Button

Latest version **9.0.2** (published 2026-08-03) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @smui/button
pnpm add @smui/button
yarn add @smui/button
bun add @smui/button
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 9.0.2 |
| Published | 2026-08-03 |
| First published | 2019-08-30 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 216.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3444 |
| Author | Hunter Perrin |
| Maintainers | hperrin |
| Keywords | svelte, svelte3, material-ui, material-design, material, svelte-components, sveltejs |

## Links

- npm: https://www.npmjs.com/package/@smui/button
- Repository: https://github.com/hperrin/svelte-material-ui
- Homepage: https://github.com/hperrin/svelte-material-ui#readme
- Issues: https://github.com/hperrin/svelte-material-ui/issues
- npm.io page: https://npm.io/package/@smui/button

## Dependencies (3)

- [@smui/common](https://npm.io/package/@smui/common.md) ^9.0.2
- [@smui/ripple](https://npm.io/package/@smui/ripple.md) ^9.0.2
- [@smui/touch-target](https://npm.io/package/@smui/touch-target.md) ^9.0.2

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 9.0.2 (latest) — 2026-08-03
- 9.0.0-beta.14 (beta) — 2026-05-16
- 8.0.0-alpha.0 (alpha) — 2024-05-13
- 9.0.1 — 2026-06-02
- 9.0.0 — 2026-05-20
- 9.0.0-beta.13 — 2026-05-16
- 9.0.0-beta.12 — 2026-04-21
- 9.0.0-beta.11 — 2026-04-21
- 9.0.0-beta.10 — 2026-04-21
- 9.0.0-beta.9 — 2026-04-21
- 9.0.0-beta.8 — 2026-04-21
- 9.0.0-beta.7 — 2026-04-21
- 9.0.0-beta.6 — 2026-04-21
- 9.0.0-beta.5 — 2026-04-21
- 9.0.0-beta.4 — 2026-04-21
- … 100 more at https://npm.io/package/@smui/button/versions

## README

# Svelte Material UI - Button

An interactive button or link.

# Installation

```sh
npm install --save-dev @smui/button
```

# Examples and Usage Information

https://sveltematerialui.com/demo/button

# Exports

## (default)

A button.

### Options / Defaults

- `component`: `href == null ? Button : A` - A component to use as the root element.
- `use`: `[]` - An array of Svelte actions and/or arrays of an action and its options.
- `class`: `''` - A CSS class string.
- `ripple`: `true` - Whether to implement a ripple for when the component is interacted with.
- `color`: `'primary'` - The button's color. ('primary' or 'secondary')
- `variant`: `'text'` - The button's style variant. ('text', 'raised', 'unelevated', or 'outlined')
- `touch`: `false` - Increase the touch target.
- `href`: `undefined` - If the `href` property is set, the button will use an anchor element, instead of a button element.
- `action`: `'close'` - Used in the context of a dialog. This sets the button's action.
- `default`: `false` - Used in the context of a dialog. This makes the button the default for the dialog.
- `secondary`: `false` - Used in the context of a banner. This makes the button the secondary action for the banner.

## Group

A button group.

### Options / Defaults

- `use`: `[]` - An array of Svelte actions and/or arrays of an action and its options.
- `class`: `''` - A CSS class string.
- `variant`: `'text'` - The button group's style variant. ('text', 'raised', 'unelevated', or 'outlined')

## GroupItem

A Svelte action for a group item. Used for containing a button in a group. This can be useful for containing menus along with the button. If you are using this on an element that you are also defining classes on (or a component that defines classes internally), you need to provide `addClass` and `removeClass` functions.

### Options / Defaults

- `addClass`: `(className) => node.classList.add(className)` - A function to add a class to the element.
- `removeClass`: `(className) => node.classList.remove(className)` - A function to remove a class to the element.

## Label

A text label.

See the [common label readme](/packages/common/README.md#label).

## Icon

A graphic icon.

See the [common icon readme](/packages/common/README.md#icon).

# More Information

See [Buttons](https://m2.material.io/components/buttons) in the Material design spec.

---
_Source: https://npm.io/package/@smui/button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._