General
Getting Started
Quick Install
Using with Cordova
Using with Ionic
Mobiscroll CLI
ES6 Modules
Instance
Customizing the Look and Feel
Upgrade From Trial
Utility functions
Update version
Upgrade Guide v4
Date & Time pickers
Event Calendar
Form components
Accordion
Alerts & Notifications
Buttons
Checkbox
Dropdown
Forms
Progress
Radio Buttons
Rating
Segmented
Slider
Stepper
Switch
Textfields
Timer
Responsive list
Numeric pickers
Pickers & dropdowns
Layout & navigation
Tools
Accessibility
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
<mbsc-button>Button</mbsc-button>With icon
<mbsc-button icon="plus" (click)="myClick()">Text & Icon</mbsc-button>
Icon button
<mbsc-button icon="plus" (click)="myClick()"></mbsc-button>
Flat button
<mbsc-button flat (click)="myClick()">Flat</mbsc-button>
Flat button with icon
<mbsc-button flat icon="arrow-left5" (click)="myClick()">Flat & Icon</mbsc-button>
Flat icon button
<mbsc-button flat icon="plus" (click)="myClick()"></mbsc-button>
Outline button
<mbsc-button outline (click)="myClick()">Flat</mbsc-button>
Full width button
<mbsc-button block (click)="myClick()">Full width Button</mbsc-button>
<mbsc-button outline block (click)="myClick()">Full width Outline button</mbsc-button>
<mbsc-button flat block (click)="myClick()">Full width Flat Button</mbsc-button>
Colored buttons
<mbsc-button color="primary" (click)="myClick()">Primary color Button</mbsc-button>
<mbsc-button color="secondary" (click)="myClick()">Secondary color Button</mbsc-button>
<mbsc-button color="success" (click)="myClick()">Success Button</mbsc-button>
<mbsc-button color="warning" (click)="myClick()">Warning Button</mbsc-button>
<mbsc-button color="danger" (click)="myClick()">Danger Button</mbsc-button>
<mbsc-button color="info" (click)="myClick()">Info Button</mbsc-button>
<mbsc-button color="light" (click)="myClick()">Light Button</mbsc-button>
<mbsc-button color="dark" (click)="myClick()">Dark Button</mbsc-button>
Button group
<div class="mbsc-btn-group">
<mbsc-button (click)="myClick()">Button 1</mbsc-button>
<mbsc-button (click)="myClick()">Button 2</mbsc-button>
<mbsc-button (click)="myClick()">Button 3</mbsc-button>
</div>
Justified button group
<!-- Buttons are streched to fill the full width of the container.-->
<div class="mbsc-btn-group-justified">
<mbsc-button (click)="myClick()">Button 1</mbsc-button>
<mbsc-button (click)="myClick()">Button 2</mbsc-button>
<mbsc-button (click)="myClick()">Button 3</mbsc-button>
</div>
Full width button group
<!-- Each button fills the whole width of the container. -->
<div class="mbsc-btn-group-block">
<mbsc-button (click)="myClick()">Button 1</mbsc-button>
<mbsc-button (click)="myClick()">Button 2</mbsc-button>
<mbsc-button (click)="myClick()">Button 3</mbsc-button>
</div>
Using with Ionic
The Button component can be used tha same way with Ionic, as any other angular component.
Options
| Name | Description |
|---|---|
| icon |
Specify an icon for the 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: You can use the icons anywhere in your app using thembsc-ic mbsc-ic-{iconName} classes, e.g.:
|
| [disabled] | If the element has the disabled attribute, it will be disabled. |
| [flat] | If the element has the flat attribute, it will be rendered with flat styling. |
| [block] | If the element has the block attribute, it will fill the full width of the container. |
| color | Sets the color preset of the button. Can be one of "primary", "secondary", "success", "warning", "danger" or "info" |
For many more examples - simple and complex use-cases - check out the buttons demos for angular.
Button Theming
Global variables of the Button
| 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 |
iOS theme
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-ios-button-color | #ffffff | The button background color |
| $mbsc-ios-button-text | #007bff | The button text color |
iOS Dark theme
| 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 |
Windwos theme
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-windows-button-color | #cccccc | The button background color |
| $mbsc-windows-button-text | #262626 | The button text color |
Windwos Dark theme
| 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 |
Material theme
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-material-button-color | #d7d7d7 | The button background color |
| $mbsc-material-button-text | #000000 | The button text color |
Material Dark theme
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-material-dark-button-color | #5b5b5b | The button background color |
| $mbsc-material-dark-button-text | #ffffff | The button text color |
Mobiscroll theme
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-mobiscroll-button-color | #4eccc4 | The button background color |
| $mbsc-mobiscroll-button-text | #efefef | The button text color |
Mobiscroll Dark theme
| Variable name | Default value | Description |
|---|---|---|
| $mbsc-mobiscroll-dark-button-color | #4fccc4 | The button background color |
| $mbsc-mobiscroll-dark-button-text | #263238 | The button text color |
If you are looking for the generic Form variables, check out the tables here.