View Source Improve this doc

ons-button

Button component. If you want to place a button in a toolbar, use ons-toolbar-button or ons-back-button instead.

Usage # 

<ons-button modifier="large--cta">
  Tap Me
</ons-button>

Live Example #

See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.

Open in New Window

See also #

Attributes #

Name Type
Default Value		 Description
modifier String The appearance of the button. Optional
should-spin Boolean Specify if the button should have a spinner. Optional
animation String The animation when the button transitions to and from the spinner. Possible values are "slide-left" (default), "slide-right", "slide-up", "slide-down", "expand-left", "expand-right", "expand-up", "expand-down", "zoom-out", "zoom-in". Optional
disabled Specify if button should be disabled. Optional

Preset Modifiers #

Modifier Description
outline Button with outline and transparent background
light Button that doesn't stand out.
quiet Button with no outline and or background..
cta Button that really stands out.
large Large button that covers the width of the screen.
large--quiet Large quiet button.
large--cta Large call to action button.

Methods Summary #

Signature Description
startSpin() Show spinner on the button.
stopSpin() Remove spinner from button.
isSpinning() Return whether the spinner is visible or not.
setSpinAnimation(animation) Set spin animation. Possible values are "slide-left" (default), "slide-right", "slide-up", "slide-down", "expand-left", "expand-right", "expand-up", "expand-down", "zoom-out", "zoom-in".
setDisabled(disabled) Disable or enable the button.
isDisabled() Returns whether the button is disabled or enabled.

Methods

startSpin() #

Show spinner on the button.

stopSpin() #

Remove spinner from button.

isSpinning(): Boolean #

Return whether the spinner is visible or not.

Returns: true if the button is spinning.

setSpinAnimation(animation) #

Set spin animation. Possible values are "slide-left" (default), "slide-right", "slide-up", "slide-down", "expand-left", "expand-right", "expand-up", "expand-down", "zoom-out", "zoom-in".

Parameters
Name Type Description
animation String Animation name.

setDisabled(disabled) #

Disable or enable the button.

Parameters
Name Type Description
disabled String If true the button will be disabled.

isDisabled(): Boolean #

Returns whether the button is disabled or enabled.

Returns: true if the button is disabled.

Discussion #