Buttons
The buttons come in several shapes, sizes and colors.
Use the click events for attaching myClicks to it and see the examples below for the various renderings.
Simple button
<button mbsc-button onClick="myClick()">Button</button>
With start icon
<button mbsc-button data-start-icon="plus" onClick="myClick()">Text & Icon</button>
With end icon
<button mbsc-button data-end-icon="plus" onClick="myClick()">Text & Icon</button>
Icon button
<button mbsc-button data-icon="plus" onClick="myClick()"></button>
Flat button
<button mbsc-button data-variant="flat" onClick="myClick()">Flat</button>
Flat button with icon
<button mbsc-button data-variant="flat" data-start-icon="arrow-left5" onClick="myClick()">Flat & Icon</button>
Flat icon button
<button mbsc-button data-variant="flat" data-icon="plus" onClick="myClick()"></button>
Outline button
<button mbsc-button data-variant="outline" onClick="myClick()">Outline button</button>
Outline button with icon
<button mbsc-button data-variant="outline" onClick="myClick()">Outline & Icon</button>
Outline button with icon
<button mbsc-button data-variant="outline" data-start-icon="arrow-plus" onClick="myClick()">Outline Icon</button>
Full width button
<button mbsc-button class="mbsc-button-block" onClick="myClick()">Full width Button</button>
Button group
<div class="mbsc-button-group">
<button mbsc-button onClick="myClick()">Button 1</button>
<button mbsc-button onClick="myClick()">Button 2</button>
<button mbsc-button onClick="myClick()">Button 3</button>
</div>
Justified button group
<!-- Buttons are streched to fill the full width of the container.-->
<div class="mbsc-button-group-justified">
<button mbsc-button onClick="myClick()">Button 1</button>
<button mbsc-button onClick="myClick()">Button 2</button>
<button mbsc-button onClick="myClick()">Button 3</button>
</div>
Full width button group
<!-- Each button fills the whole width of the container. -->
<div class="mbsc-button-group-block">
<button mbsc-button onClick="myClick()">Button 1</button>
<button mbsc-button onClick="myClick()">Button 2</button>
<button mbsc-button onClick="myClick()">Button 3</button>
</div>
Mobiscroll includes several predefined button colors, each serving its own semantic purpose
<!-- Predefined button styles -->
<button mbsc-button data-color="primary" onClick="myClick()">primary button</button>
<button mbsc-button data-color="secondary" onClick="myClick()">secondary button</button>
<button mbsc-button data-color="success" onClick="myClick()">success button</button>
<button mbsc-button data-color="danger" onClick="myClick()">danger button</button>
<button mbsc-button data-color="warning" onClick="myClick()">warning button</button>
<button mbsc-button data-color="info" onClick="myClick()">info button</button>
<button mbsc-button data-color="light" onClick="myClick()">light button</button>
<button mbsc-button data-color="dark" onClick="myClick()">dark button</button>
<!-- Predefined flat button styles -->
<button mbsc-button data-variant="flat" data-color="primary" onClick="myClick()">primary button</button>
<button mbsc-button data-variant="flat" data-color="secondary" onClick="myClick()">secondary button</button>
<button mbsc-button data-variant="flat" data-color="success" onClick="myClick()">success button</button>
<button mbsc-button data-variant="flat" data-color="danger" onClick="myClick()">danger button</button>
<button mbsc-button data-variant="flat" data-color="warning" onClick="myClick()">warning button</button>
<button mbsc-button data-variant="flat" data-color="info" onClick="myClick()">info button</button>
<button mbsc-button data-variant="flat" data-color="light" onClick="myClick()">light button</button>
<button mbsc-button data-variant="flat" data-color="dark" onClick="myClick()">dark button</button>
<!-- Predefined outline button styles -->
<button mbsc-button data-variant="outline" data-color="primary" onClick="myClick()">primary button</button>
<button mbsc-button data-variant="outline" data-color="secondary" onClick="myClick()">secondary button</button>
<button mbsc-button data-variant="outline" data-color="success" onClick="myClick()">success button</button>
<button mbsc-button data-variant="outline" data-color="danger" onClick="myClick()">danger button</button>
<button mbsc-button data-variant="outline" data-color="warning" onClick="myClick()">warning button</button>
<button mbsc-button data-variant="outline" data-color="info" onClick="myClick()">info button</button>
<button mbsc-button data-variant="outline" data-color="light" onClick="myClick()">light button</button>
<button mbsc-button data-variant="outline" data-color="dark" onClick="myClick()">dark button</button>
Options
Name |
Description |
data-color |
Specifies the predefined button color. Possible values: primary , secondary , success ,
danger , warning , info , light , dark .
|
data-end-icon |
Specifies the end icon for a button with icon and text. A font-icon name should be passed.
|
data-end-icon-src |
Specifies the end icon for a button with icon and text. The path of the icon should be passed.
|
data-end-icon-svg |
Specifies the end icon for a button with icon and text. The svg should be passed.
|
data-icon |
Specifies the icon for an icon-only button. A font-icon name should be passed.
You can build your custom icon set on our download page ("Choose Icon Set" section).
See the full list of available icons here.
The default icon pack contains the following icons:
- home
- pencil
- office
- newspaper
- droplet
- image2
- camera
- play
- bullhorn
- connection
- library
- book
- file4
- copy2
- copy3
- stack
- folder
- tag
- cart
- support
- phone
- location
- credit
- map
- history
- clock
- alarm2
- stopwatch
- calendar
- mobile
- drawer
- undo2
- redo2
- forward
- reply
- bubble
- bubbles
- disk
- download
- upload
- user4
- key2
- lock2
- unlocked
- cogs
- aid
- bars
- cloud-download
- cloud-upload
- globe
- airplane
- earth
- link
- flag
- eye
- eye-blocked
- attachment
- star3
- heart
- thumbs-up
- thumbs-up2
- smiley2
- sad2
- checkmark
- close
- plus
- minus
- remove
- loop2
You can use the icons anywhere in your app using the mbsc-icon mbsc-icon-{iconName} classes, e.g.:
<div class="mbsc-icon mbsc-icon-star"></div>
|
data-icon-src |
Specifies the icon for an icon-only button. The path of the icon should be passed.
|
data-icon-svg |
Specifies the icon for an icon-only button. The svg should be passed.
|
data-rtl |
If true , sets right to left display for the button. |
data-ripple |
If true , adds ripple effect for the active button. |
data-start-icon |
Specifies the start icon for a button with icon and text. A font-icon name should be passed.
|
data-start-icon-src |
Specifies the start icon for a button with icon and text. The path of the icon should be passed.
|
data-start-icon-svg |
Specifies the start icon for a button with icon and text. The svg should be passed.
|
data-tag |
Specifies the tag of the element. Possible values: button , span , a . |
data-theme |
Sets the visual appearance of the button.
If it is
'auto' or
undefined , the theme will automatically be chosen based on the platform.
If the theme for the specific platform is not present, it will default to the Mobiscroll theme.
Supplied themes:
'ios' - iOS theme
'ios-dark' - iOS dark theme
'material' - Material theme
'material-dark' - Material dark theme
'windows' - Windows theme
'windows-dark' - Windows dark theme
|
|
data-variant |
Specifies the type of the button. Possible values: standard , flat , outline .
|
disabled |
If an element has the disabled attribute, the element will be disabled. |
For many more examples - simple and complex use-cases - check out the
buttons demos for javascript.
Button Theming
Variable name |
Description |
$mbsc-button-color-light
|
Sets the background color of the button
|
$mbsc-button-color-dark
|
$mbsc-button-text-light
|
Sets the text color of the button
|
$mbsc-button-text-dark
|
Variable name |
Default value |
Description |
$mbsc-ios-button-color
|
#ffffff
|
The button background color
|
$mbsc-ios-button-text
|
#007bff
|
The button text color
|
Variable name |
Default value |
Description |
$mbsc-ios-dark-button-color
|
#3b3b3b
|
The button background color
|
$mbsc-ios-dark-button-text
|
#FF8402
|
The button text color
|
Variable name |
Default value |
Description |
$mbsc-windows-button-color
|
#cccccc
|
The button background color
|
$mbsc-windows-button-text
|
#333333
|
The button text color
|
Variable name |
Default value |
Description |
$mbsc-windows-dark-button-color
|
#404040
|
The button background color
|
$mbsc-windows-dark-button-text
|
#ffffff
|
The button text color
|
Variable name |
Default value |
Description |
$mbsc-material-button-color
|
#cfcfcf
|
The button background color
|
$mbsc-material-button-text
|
#000000
|
The button text color
|
Variable name |
Default value |
Description |
$mbsc-material-dark-button-color
|
#2b2b2b
|
The button background color
|
$mbsc-material-dark-button-text
|
#ffffff
|
The button text color
|
If you are looking for the generic Form variables, check out the tables here.