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 (click)="myClick()">Button</mbsc-button>
With icon
<mbsc-button startIcon="plus" (click)="myClick()">Text & Icon</mbsc-button>
Icon button
<mbsc-button icon="plus" (click)="myClick()"></mbsc-button>
Flat button
<mbsc-button variable="flat" (click)="myClick()">Flat</mbsc-button>
Flat button with icon
<mbsc-button variable="flat" startIcon="arrow-left5" (click)="myClick()">Flat & Icon</mbsc-button>
Flat icon button
<mbsc-button variable="flat" icon="plus" (click)="myClick()"></mbsc-button>
Outline button
<mbsc-button variable="outline" (click)="myClick()">Flat</mbsc-button>
Full width button
<mbsc-button class="mbsc-button-block" (click)="myClick()">Full width Button</mbsc-button>
<mbsc-button variable="outline" class="mbsc-button-block" (click)="myClick()">Full width Outline button</mbsc-button>
<mbsc-button variable="flat" class="mbsc-button-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-button-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-button-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-button-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 |
color |
Sets the color preset of the button. Can be one of "primary", "secondary", "success", "warning", "danger", "info", "light" or "dark". |
disabled |
If an element has the disabled attribute, the element will be disabled. |
endIcon |
Specifies the end icon for a button with icon and text. A font-icon name should be passed.
|
endIconSrc |
Specifies the end icon for a button with icon and text. The path of the icon should be passed.
|
endIconSvg |
Specifies the end icon for a button with icon and text. The svg should be passed.
|
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>
|
iconSrc |
Specifies the icon for an icon-only button. The path of the icon should be passed.
|
iconSvg |
Specifies the icon for an icon-only button. The svg should be passed.
|
ripple |
If true , adds ripple effect for the active button. |
rtl |
If true , sets right to left display for the button. |
startIcon |
Specifies the start icon for a button with icon and text. A font-icon name should be passed.
|
startIconSrc |
Specifies the start icon for a button with icon and text. The path of the icon should be passed.
|
startIconSvg |
Specifies the start icon for a button with icon and text. The svg should be passed.
|
tag |
Specifies the tag of the element. Possible values: button , span , a . |
variant |
Specifies the type of the button. Possible values: standard , flat , outline .
|
For many more examples - simple and complex use-cases - check out the
buttons demos for angular.
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.