Warning: Use of undefined constant MDB_STRIPE_SUB_WEBHOOK_SECRET - assumed 'MDB_STRIPE_SUB_WEBHOOK_SECRET' (this will throw an Error in a future version of PHP) in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/stripe/class-mdb-stripe-webhook.php on line 26

Notice: Undefined index: HTTP_REFERER in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Angular Mobile Buttons - Bootstrap 4 & Material Design. - Material Design for Bootstrap

Angular Mobile Buttons

Angular Mobile Buttons - Bootstrap 4 & Material Design

Use Angular Mobile Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more..


Basic example

Angular Mobile Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Android
Android buttons
iOS
iOS buttons

        <ScrollView>
          <StackLayout>
            <Button mdbBtn theme="primary" text="Primary"></Button>
            <Button mdbBtn theme="secondary" text="Secondary"></Button>
            <Button mdbBtn theme="success" text="Success"></Button>
            <Button mdbBtn theme="danger" text="Danger"></Button>
            <Button mdbBtn theme="warning" text="Warning"></Button>
            <Button mdbBtn theme="info" text="Info"></Button>
            <Button mdbBtn theme="light" text="Light"></Button>
            <Button mdbBtn theme="dark" text="Dark"></Button>
          </StackLayout>
        </ScrollView>
      

Additional buttons

Android
Android buttons
iOS
iOS buttons

        <ScrollView>
          <StackLayout>
            <Button mdbBtn theme="elegant" text="Elegant"></Button>
            <Button mdbBtn theme="unique" text="Unique"></Button>
            <Button mdbBtn theme="pink" text="Pink"></Button>
            <Button mdbBtn theme="purple" text="Purple"></Button>
            <Button mdbBtn theme="deep-purple" text="Deep Purple"></Button>
            <Button mdbBtn theme="indigo" text="Indigo"></Button>
            <Button mdbBtn theme="light-blue" text="Light Blue"></Button>
            <Button mdbBtn theme="cyan" text="Cyan"></Button>
            <Button mdbBtn theme="dark-green" text="Dark Green"></Button>
            <Button mdbBtn theme="light-green" text="Light Green"></Button>
            <Button mdbBtn theme="yellow" text="Yellow"></Button>
            <Button mdbBtn theme="amber" text="Amber"></Button>
            <Button mdbBtn theme="deep-orange" text="Deep Orange"></Button>
            <Button mdbBtn theme="brown" text="Brown"></Button>
            <Button mdbBtn theme="blue-grey" text="Blue Grey"></Button>
            <Button mdbBtn theme="mdb-color" text="MDB Color"></Button>
          </StackLayout>
        </ScrollView>
      

Gradient buttons

Android
Android buttons
iOS
iOS buttons

        <StackLayout>
          <Button mdbBtn gradient="peach" text="Peach"></Button>
          <Button mdbBtn gradient="purple" text="Purple"></Button>
          <Button mdbBtn gradient="aqua" text="Elegant"></Button>
        </StackLayout>
      

Outline buttons

Use outline="true" input to create colorful outline buttons.

Android
Android buttons
iOS
iOS buttons

        <StackLayout>
          <Button mdbBtn theme="primary" outline="true" text="Primary"></Button>
          <Button mdbBtn theme="default" outline="true" text="Default"></Button>
          <Button mdbBtn theme="secondary" outline="true" text="Secondary"></Button>
          <Button mdbBtn theme="success" outline="true" text="Success"></Button>
          <Button mdbBtn theme="info" outline="true" text="Info"></Button>
          <Button mdbBtn theme="warning" outline="true" text="Warning"></Button>
          <Button mdbBtn theme="danger" outline="true" text="Danger"></Button>
        </StackLayout>
      

Disabled buttons

Use isEnabled="false" input to disable the button.

Android
Android buttons
iOS
iOS buttons

        <StackLayout>
          <Button mdbBtn theme="primary" text="Disabled" isEnabled="false"></Button>
          <Button mdbBtn theme="secondary" text="Disabled" isEnabled="false"></Button>
          <Button mdbBtn theme="default" text="Disabled" isEnabled="false"></Button>
        </StackLayout>
      

Angular Mobile Buttons - API

In this section you will find informations about buttons and its required modules and available inputs, outputs, methods and events.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular Mobile library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.


    // MDB Angular Mobile Free
    import { MdbButtonsModule } from 'mdb-angular-mobile'
  

Directives

MdbButton

Selector: [mdbBtn]

Type: MdbBtnDirective


Inputs

Name Type Default Description Example
gradient string ' ' Allow to add a gradient background color to the button. gradient="peach"
isEnabled boolean true Allow to disable button. isEnabled="false"
outline boolean false Allow to change button style to outline. outline="true"
theme string ' ' Allow to set color of a button. theme="primary"