@detachhead/smui-button
v7.0.0-beta.0-7aa154b58dd17d39757ade237397a003da4f0bdc
Published
Svelte Material UI - Button
Downloads
6
Maintainers
Readme
Svelte Material UI - Button
An interactive button or link.
Installation
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 thehref
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.
Icon
A graphic icon.
See the common icon readme.
More Information
See Buttons in the Material design spec.
See Button in MDC-Web for information about the upstream library's architecture.