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.
<mobiscroll.Button />
Button usages
<!-- Simple button -->
<mobiscroll.Button onClick={myClick}>My Button</mobiscroll.Button>
<!-- With icon -->
<mobiscroll.Button icon="pencil" onClick={myClick}>My Button</mobiscroll.Button>
<!-- Just icon -->
<mobiscroll.Button icon="plus" onClick={myClick} />
<!-- Flat button -->
<mobiscroll.Button flat={true} onClick={myClick}>My Button</mobiscroll.Button>
<!-- Outline button -->
<mobiscroll.Button outline={true} onClick={myClick}>My Button</mobiscroll.Button>
<!-- Full width button -->
<mobiscroll.Button block={true} onClick={myClick}>My Button</mobiscroll.Button>
Button groups
<!-- Button group -->
<div className="mbsc-btn-group">
<mobiscroll.Button onClick={myClick}>Button 1</mobiscroll.Button>
<mobiscroll.Button onClick={myClick}>Button 2</mobiscroll.Button>
<mobiscroll.Button onClick={myClick}>Button 3</mobiscroll.Button>
</div>
Justified button group
<!-- Buttons are streched to fill the full width of the container.-->
<div className="mbsc-btn-group-justified">
<mobiscroll.Button onClick={myClick}>Button 1</mobiscroll.Button>
<mobiscroll.Button onClick={myClick}>Button 2</mobiscroll.Button>
<mobiscroll.Button onClick={myClick}>Button 3</mobiscroll.Button>
</div>
Full width button group
<!-- Each button fills the whole width of the container. -->
<div className="mbsc-btn-group-block">
<mobiscroll.Button onClick={myClick}>Button 1</mobiscroll.Button>
<mobiscroll.Button onClick={myClick}>Button 2</mobiscroll.Button>
<mobiscroll.Button onClick={myClick}>Button 3</mobiscroll.Button>
</div>
Mobiscroll includes several predefined button colors, each serving its own semantic purpose
<mobiscroll.Button color="primary" onClick={myClick}>Button Primary</mobiscroll.Button>
<mobiscroll.Button color="secondary" onClick={myClick}>Button Secondary</mobiscroll.Button>
<mobiscroll.Button color="success" onClick={myClick}>Button Success</mobiscroll.Button>
<mobiscroll.Button color="warning" onClick={myClick}>Button Warning</mobiscroll.Button>
<mobiscroll.Button color="danger" onClick={myClick}>Button Danger</mobiscroll.Button>
<mobiscroll.Button color="info" onClick={myClick}>Button Info</mobiscroll.Button>
Prop |
Type |
Description |
block |
PropTypes.bool |
When true renders the button to take the full width of the container. |
color |
PropTypes.string |
Specify the color preset of the button. Can be one of "primary", "secondary", "success", "danger", "warning" and "info". |
disabled |
PropTypes.bool |
Disables the button when true. |
flat |
PropTypes.bool |
When true renders the button with flat styling. |
icon |
PropTypes.string |
Specify 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:
- 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-ic mbsc-ic-{iconName} classes, e.g.:
<div class="mbsc-ic mbsc-ic-star"></div>
|
name |
PropTypes.string |
Specify name attribute for the button. |
outline |
PropTypes.bool |
When true renders the button with outline styling. |
type |
PropTypes.string |
Specify type attribute for the button. |
For many more examples - simple and complex use-cases - check out the
buttons demos for react.
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
|
#262626
|
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
|
#d7d7d7
|
The button background color
|
$mbsc-material-button-text
|
#000000
|
The button text color
|
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
|
Variable name |
Default value |
Description |
$mbsc-mobiscroll-button-color
|
#4eccc4
|
The button background color
|
$mbsc-mobiscroll-button-text
|
#efefef
|
The button text color
|
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.