Buttons
Use the buttons on any mobile and desktop form or page. The buttons come with several rendering modes and styles. Use it as:
- fluid-width buttons (the buttons grow with their content)
- justified
- full width buttons
Icon support is built in along with three different styles:
- filled buttons
- flat buttons
- outlined buttons
Customize the look & feel: See how to apply color presets →
Demo
html<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Buttons</div>
<div class="mbsc-button-group">
<mbsc-button>Button</mbsc-button>
<mbsc-button [disabled]="true">Disabled</mbsc-button>
</div>
<div class="mbsc-button-group">
<mbsc-button id="action-btn">Click for action</mbsc-button>
</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Full width buttons</div>
<div class="mbsc-button-group-block">
<mbsc-button>Full width button</mbsc-button>
<mbsc-button [disabled]="true">Disabled full width</mbsc-button>
</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Justified buttons</div>
<div class="mbsc-button-group-justified">
<mbsc-button>Tag</mbsc-button>
<mbsc-button>Favorite</mbsc-button>
<mbsc-button>Flag</mbsc-button>
</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Icons</div>
<div class="mbsc-button-group">
<mbsc-button icon="tag"></mbsc-button>
<mbsc-button icon="heart"></mbsc-button>
<mbsc-button icon="flag" [disabled]="true"></mbsc-button>
</div>
<div class="mbsc-button-group">
<mbsc-button startIcon="tag">Tag</mbsc-button>
<mbsc-button startIcon="heart">Favorite</mbsc-button>
<mbsc-button startIcon="flag" [disabled]="true">Flag</mbsc-button>
</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Flat buttons</div>
<div class="mbsc-button-group">
<mbsc-button variant="flat">Flat</mbsc-button>
<mbsc-button variant="flat" startIcon="arrow-left5">Flat & Icon</mbsc-button>
<mbsc-button variant="flat" icon="arrow-left5"></mbsc-button>
<mbsc-button variant="flat" icon="key2" [disabled]="true"></mbsc-button>
<mbsc-button variant="flat" [disabled]="true">Flat disabled</mbsc-button>
</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Outline buttons</div>
<div class="mbsc-button-group">
<mbsc-button variant="outline">Outline</mbsc-button>
<mbsc-button variant="outline" startIcon="arrow-left5">Outline & Icon</mbsc-button>
<mbsc-button variant="outline" icon="arrow-left5"></mbsc-button>
<mbsc-button variant="outline" icon="key2" [disabled]="true"></mbsc-button>
<mbsc-button variant="outline" [disabled]="true">Outline disabled</mbsc-button>
</div>
</div>
tsconstructor(public notify: Notifications) { }
this.notify.toast({
message: 'Button was clicked'
});
Buttons
Full width buttons
Justified buttons
Icons
Flat buttons
Outline buttons
ComponentTemplate
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscModule, Notifications, setOptions } from '@mobiscroll/angular';
setOptions({
theme: ' ',
themeVariant: ' ',
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {
constructor(public notify: Notifications) {}
actionToast(): void {
this.notify.toast({
message: 'Button was clicked',
});
}
}
<mbsc-page>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Buttons</div>
<div class="mbsc-button-group">
<mbsc-button>Button</mbsc-button>
<mbsc-button [disabled]="true">Disabled</mbsc-button>
</div>
<div class="mbsc-button-group">
<mbsc-button (click)="actionToast()">Click for action</mbsc-button>
</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Full width buttons</div>
<div class="mbsc-button-group-block">
<mbsc-button>Full width button</mbsc-button>
<mbsc-button [disabled]="true">Disabled full width</mbsc-button>
</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Justified buttons</div>
<div class="mbsc-button-group-justified">
<mbsc-button>Tag</mbsc-button>
<mbsc-button>Favorite</mbsc-button>
<mbsc-button>Flag</mbsc-button>
</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Icons</div>
<div class="mbsc-button-group">
<mbsc-button icon="tag"></mbsc-button>
<mbsc-button icon="heart"></mbsc-button>
<mbsc-button icon="flag" [disabled]="true"></mbsc-button>
</div>
<div class="mbsc-button-group">
<mbsc-button startIcon="tag">Tag</mbsc-button>
<mbsc-button startIcon="heart">Favorite</mbsc-button>
<mbsc-button startIcon="flag" [disabled]="true">Flag</mbsc-button>
</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Flat buttons</div>
<div class="mbsc-button-group">
<mbsc-button variant="flat">Flat</mbsc-button>
<mbsc-button variant="flat" startIcon="arrow-left5">Flat & Icon</mbsc-button>
<mbsc-button variant="flat" icon="arrow-left5"></mbsc-button>
<mbsc-button variant="flat" icon="key2" [disabled]="true"></mbsc-button>
<mbsc-button variant="flat" [disabled]="true">Flat disabled</mbsc-button>
</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Outline buttons</div>
<div class="mbsc-button-group">
<mbsc-button variant="outline">Outline</mbsc-button>
<mbsc-button variant="outline" startIcon="arrow-left5">Outline & Icon</mbsc-button>
<mbsc-button variant="outline" icon="arrow-left5"></mbsc-button>
<mbsc-button variant="outline" icon="key2" [disabled]="true"></mbsc-button>
<mbsc-button variant="outline" [disabled]="true">Outline disabled</mbsc-button>
</div>
</div>
</mbsc-page>