Colors
Use presets with pre-defined colors on top of the theme colors. Every theme ships with eight customizable presets that can be used across various components including buttons, segmented and steppers:
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
Customize the colors or use your own colors: Learn how to change the Sass variables for the presets →
Demo
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Button colors</div>
<div class="mbsc-mbsc-button-group">
<mbsc-button color="primary">Primary</mbsc-button>
<mbsc-button color="secondary">Secondary</mbsc-button>
<mbsc-button color="success">Success</mbsc-button>
<mbsc-button color="danger">Danger</mbsc-button>
<mbsc-button color="warning">Warning</mbsc-button>
<mbsc-button color="info">Info</mbsc-button>
<mbsc-button color="light">Light</mbsc-button>
<mbsc-button color="dark">Dark</mbsc-button>
</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Segmented colors</div>
<mbsc-segmented-group name="groupPrimary" color="primary">
<mbsc-segmented value="desktop" icon="home" [checked]="true">Desktop</mbsc-segmented>
<mbsc-segmented value="mobile" icon="mobile">Mobile</mbsc-segmented>
<mbsc-segmented value="cloud" icon="cloud-upload">Cloud</mbsc-segmented>
</mbsc-segmented-group>
<mbsc-segmented-group name="groupSecondary" color="secondary">
<mbsc-segmented value="desktop" icon="home" [checked]="true">Desktop</mbsc-segmented>
<mbsc-segmented value="mobile" icon="mobile">Mobile</mbsc-segmented>
<mbsc-segmented value="cloud" icon="cloud-upload">Cloud</mbsc-segmented>
</mbsc-segmented-group>
<mbsc-segmented-group name="groupSuccess" color="success">
<mbsc-segmented value="desktop" icon="home" [checked]="true">Desktop</mbsc-segmented>
<mbsc-segmented value="mobile" icon="mobile">Mobile</mbsc-segmented>
<mbsc-segmented value="cloud" icon="cloud-upload">Cloud</mbsc-segmented>
</mbsc-segmented-group>
<mbsc-segmented-group name="groupDanger" color="danger">
<mbsc-segmented value="desktop" icon="home" [checked]="true">Desktop</mbsc-segmented>
<mbsc-segmented value="mobile" icon="mobile">Mobile</mbsc-segmented>
<mbsc-segmented value="cloud" icon="cloud-upload">Cloud</mbsc-segmented>
</mbsc-segmented-group>
<mbsc-segmented-group name="groupWarning" color="warning">
<mbsc-segmented value="desktop" icon="home" [checked]="true">Desktop</mbsc-segmented>
<mbsc-segmented value="mobile" icon="mobile">Mobile</mbsc-segmented>
<mbsc-segmented value="cloud" icon="cloud-upload">Cloud</mbsc-segmented>
</mbsc-segmented-group>
<mbsc-segmented-group name="groupInfo" color="info">
<mbsc-segmented value="desktop" icon="home" [checked]="true">Desktop</mbsc-segmented>
<mbsc-segmented value="mobile" icon="mobile">Mobile</mbsc-segmented>
<mbsc-segmented value="cloud" icon="cloud-upload">Cloud</mbsc-segmented>
</mbsc-segmented-group>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Stepper colors</div>
<mbsc-stepper label="Primary" color="primary" [(ngModel)]="primary" [min]="-500" [max]="500" [step]="100">
</mbsc-stepper>
<mbsc-stepper label="Secondary" color="secondary" [(ngModel)]="secondary" [min]="-500" [max]="500" [step]="100">
</mbsc-stepper>
<mbsc-stepper label="Success" color="success" [(ngModel)]="success" [min]="-500" [max]="500" [step]="100">
</mbsc-stepper>
<mbsc-stepper label="Danger" color="danger" [(ngModel)]="danger" [min]="-500" [max]="500" [step]="100">
</mbsc-stepper>
<mbsc-stepper label="Warning" color="warning" [(ngModel)]="warning" [min]="-500" [max]="500" [step]="100">
</mbsc-stepper>
<mbsc-stepper label="Info" color="info" [(ngModel)]="info" [min]="-500" [max]="500" [step]="100"></mbsc-stepper>
</div>
Button colors
Segmented colors
Stepper colors
ComponentTemplate
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
theme: ' ',
themeVariant: ' ',
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent {
primary = 100;
secondary = 100;
success = 100;
danger = 100;
warning = 100;
info = 100;
}
<mbsc-page>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Button colors</div>
<div class="mbsc-mbsc-button-group">
<mbsc-button color="primary">Primary</mbsc-button>
<mbsc-button color="secondary">Secondary</mbsc-button>
<mbsc-button color="success">Success</mbsc-button>
<mbsc-button color="danger">Danger</mbsc-button>
<mbsc-button color="warning">Warning</mbsc-button>
<mbsc-button color="info">Info</mbsc-button>
<mbsc-button color="light">Light</mbsc-button>
<mbsc-button color="dark">Dark</mbsc-button>
</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Segmented colors</div>
<mbsc-segmented-group name="groupPrimary" color="primary">
<mbsc-segmented value="desktop" icon="home" [checked]="true">Desktop</mbsc-segmented>
<mbsc-segmented value="mobile" icon="mobile">Mobile</mbsc-segmented>
<mbsc-segmented value="cloud" icon="cloud-upload">Cloud</mbsc-segmented>
</mbsc-segmented-group>
<mbsc-segmented-group name="groupSecondary" color="secondary">
<mbsc-segmented value="desktop" icon="home" [checked]="true">Desktop</mbsc-segmented>
<mbsc-segmented value="mobile" icon="mobile">Mobile</mbsc-segmented>
<mbsc-segmented value="cloud" icon="cloud-upload">Cloud</mbsc-segmented>
</mbsc-segmented-group>
<mbsc-segmented-group name="groupSuccess" color="success">
<mbsc-segmented value="desktop" icon="home" [checked]="true">Desktop</mbsc-segmented>
<mbsc-segmented value="mobile" icon="mobile">Mobile</mbsc-segmented>
<mbsc-segmented value="cloud" icon="cloud-upload">Cloud</mbsc-segmented>
</mbsc-segmented-group>
<mbsc-segmented-group name="groupDanger" color="danger">
<mbsc-segmented value="desktop" icon="home" [checked]="true">Desktop</mbsc-segmented>
<mbsc-segmented value="mobile" icon="mobile">Mobile</mbsc-segmented>
<mbsc-segmented value="cloud" icon="cloud-upload">Cloud</mbsc-segmented>
</mbsc-segmented-group>
<mbsc-segmented-group name="groupWarning" color="warning">
<mbsc-segmented value="desktop" icon="home" [checked]="true">Desktop</mbsc-segmented>
<mbsc-segmented value="mobile" icon="mobile">Mobile</mbsc-segmented>
<mbsc-segmented value="cloud" icon="cloud-upload">Cloud</mbsc-segmented>
</mbsc-segmented-group>
<mbsc-segmented-group name="groupInfo" color="info">
<mbsc-segmented value="desktop" icon="home" [checked]="true">Desktop</mbsc-segmented>
<mbsc-segmented value="mobile" icon="mobile">Mobile</mbsc-segmented>
<mbsc-segmented value="cloud" icon="cloud-upload">Cloud</mbsc-segmented>
</mbsc-segmented-group>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Stepper colors</div>
<mbsc-stepper label="Primary" color="primary" [(ngModel)]="primary" [min]="-500" [max]="500" [step]="100"> </mbsc-stepper>
<mbsc-stepper label="Secondary" color="secondary" [(ngModel)]="secondary" [min]="-500" [max]="500" [step]="100"> </mbsc-stepper>
<mbsc-stepper label="Success" color="success" [(ngModel)]="success" [min]="-500" [max]="500" [step]="100"> </mbsc-stepper>
<mbsc-stepper label="Danger" color="danger" [(ngModel)]="danger" [min]="-500" [max]="500" [step]="100"> </mbsc-stepper>
<mbsc-stepper label="Warning" color="warning" [(ngModel)]="warning" [min]="-500" [max]="500" [step]="100"> </mbsc-stepper>
<mbsc-stepper label="Info" color="info" [(ngModel)]="info" [min]="-500" [max]="500" [step]="100"></mbsc-stepper>
</div>
</mbsc-page>