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 startIcon="pencil" onClick={myClick}>My Button</mobiscroll.Button>

<!-- Just icon -->
<mobiscroll.Button icon="plus" onClick={myClick} />

<!-- Flat button -->
<mobiscroll.Button variant="flat" onClick={myClick}>My Button</mobiscroll.Button>

<!-- Outline button -->
<mobiscroll.Button variant="outline" onClick={myClick}>My Button</mobiscroll.Button>

<!-- Full width button -->
<mobiscroll.Button className="mbsc-button-block" onClick={myClick}>My Button</mobiscroll.Button>
Button groups
<!-- Button group -->
<div className="mbsc-button-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-button-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-button-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>
<mobiscroll.Button color="light" onClick={myClick}>Button Light</mobiscroll.Button>
<mobiscroll.Button color="dark" onClick={myClick}>Button Dark</mobiscroll.Button>
Prop Type Description
color PropTypes.string Specify the color preset of the button. Can be one of "primary", "secondary", "success", "danger", "warning", "info", "light" or "dark.
disabled PropTypes.bool Disables the button when true.
endIcon PropTypes.string Specifies the end icon for a button with icon and text. A font-icon name should be passed.
endIconSrc PropTypes.string Specifies the end icon for a button with icon and text. The path of the icon should be passed.
endIconSvg PropTypes.string Specifies the end icon for a button with icon and text. The svg should be passed.
icon PropTypes.string 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 PropTypes.string Specifies the icon for an icon-only button. The path of the icon should be passed.
iconSvg PropTypes.string Specifies the icon for an icon-only button. The svg should be passed.
ripple PropTypes.bool If true, adds ripple effect for the active button.
rtl PropTypes.bool If true, sets right to left display for the button.
startIcon PropTypes.string Specifies the end icon for a button with icon and text. A font-icon name should be passed.
startIconSrc PropTypes.string Specifies the end icon for a button with icon and text. The path of the icon should be passed.
startIconSvg PropTypes.string Specifies the end icon for a button with icon and text. The svg should be passed.
tag PropTypes.string Specifies the tag of the element. Possible values: button, span, a.
variant PropTypes.string 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 react.

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
#333333
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
#cfcfcf
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
#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.