Skip to main content

Button

The Button component is an interactive element activated by the user. Once activated, it performs an action, such as submitting a form or opening a dialog.

Usage​

Buttons can display text, icons, or both. They can be colored and styled with various options.

Button styles​

Button variations
<mbsc-button>Standard button</mbsc-button>
<mbsc-button variant="flat">Flat button</mbsc-button>
<mbsc-button variant="outline">Outline button</mbsc-button>

<mbsc-button startIcon="home">With start icon</mbsc-button>
<mbsc-button endIcon="home">With end icon</mbsc-button>
<mbsc-button icon="pencil" ariaLabel="Icon only"></mbsc-button>

<mbsc-button color="primary">Primary button</mbsc-button>
<mbsc-button color="secondary">Secondary button</mbsc-button>
<mbsc-button color="success">Success button</mbsc-button>
<mbsc-button color="danger">Danger button</mbsc-button>
<mbsc-button color="warning">Warning button</mbsc-button>
<mbsc-button color="info">Info button</mbsc-button>
<mbsc-button color="light">Light button</mbsc-button>
<mbsc-button color="dark">Dark button</mbsc-button>
import { Component } from '@angular/core';
import { MbscModule } from '@mobiscroll/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true,
  imports: [MbscModule],
})
export class AppComponent {}

Button sizes and groups​

<!-- Full width button -->
<mbsc-button class="mbsc-button-block">Full width Button</mbsc-button>

<!-- Button group -->
<div class="mbsc-button-group">
    <mbsc-button>Button 1</mbsc-button>
    <mbsc-button>Button 2</mbsc-button>
    <mbsc-button>Button 3</mbsc-button>
</div>

<!-- Justified group -->
<!-- Buttons are streched to fill the full width of the container -->
<div class="mbsc-button-group-justified">
    <mbsc-button>Button 1</mbsc-button>
    <mbsc-button>Button 2</mbsc-button>
    <mbsc-button>Button 3</mbsc-button>
</div>

<!-- Full width group -->
<!-- Each button fills the whole width of the container -->
<div class="mbsc-button-group-block">
    <mbsc-button>Button 1</mbsc-button>
    <mbsc-button>Button 2</mbsc-button>
    <mbsc-button>Button 3</mbsc-button>
</div>
import { Component } from '@angular/core';
import { MbscModule } from '@mobiscroll/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true,
  imports: [MbscModule],
})
export class AppComponent {}

Handling clicks​

Clicks can be handled using the standard click event.

<mbsc-button (click)="myClickHandler()">Click me!</mbsc-button>
import { Component } from '@angular/core';
import { MbscModule } from '@mobiscroll/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true,
  imports: [MbscModule],
})
export class AppComponent {}

Options​

Explore the following API options that help you easily configure the Button component.

ariaLabel​

string

Specifies the accessible name of the button. Recommended for icon-only buttons.

Default value: undefined

color​

"success" | "light" | "dark" | "primary" | "secondary" | "danger" | "warning" | "info"

Specifies the predefined color of the button.

Default value: undefined

cssClass​

string

Specifies a custom CSS class for the component.

Default value: undefined

disabled​

boolean

Specifies the disabled state of the button.

Default value: false

endIcon​

any

Specifies the icon which will be displayed at the end of the button. Use the startIcon option for specifying an icon at the start.

Default value: undefined

icon​

any

Specifies the icon for an icon-only button.

Default value: undefined

startIcon​

any

Specifies the icon which will be displayed at the start of the button. Use the endIcon option for specifying an icon at the end.

Default value: undefined

tabIndex​

number

Specifies the tabindex attribute of the button.

Default value: undefined

theme​

string

Specifies the visual appearance of the component.

If it is 'auto' or undefined, the theme will automatically be chosen based on the platform. If custom themes are also present, they will take precedence over the built in themes, e.g. if there's an iOS based custom theme, it will be chosen on the iOS platform instead of the default iOS theme.

Supplied themes:

  • 'ios' - iOS theme
  • 'material' - Material theme
  • 'windows' - Windows theme

It's possible to modify theme colors or create custom themes.

info

Make sure that the theme you set is included in the downloaded package.

Default value: undefined

themeVariant​

"auto" | "light" | "dark"

Controls which variant of the theme will be used (light or dark).

Possible values:

  • 'light' - Use the light variant of the theme.
  • 'dark' - Use the dark variant of the theme.
  • 'auto' or undefined - Detect the preferred system theme on devices where this is supported.

To use the option with custom themes, make sure to create two custom themes, where the dark version has the same name as the light one, suffixed with '-dark', e.g.: 'my-theme' and 'my-theme-dark'.

Default value: undefined

variant​

"outline" | "standard" | "flat"

Specifies the style of the button.

Default value: 'standard'

Localization​

The Button component is fully localized. This covers date and time format, button copy, rtl and more.

locale​

MbscLocale

Sets the language of the component. The locale object contains all the translations for a given language. The built in language modules are listed below. If a language is not listed, it can be provided as a custom language module.

Supported values:

  • Arabic: localeAr, 'ar'
  • Bulgarian: localeBg, 'bg'
  • Catalan: localeCa, 'ca'
  • Czech: localeCs, 'cs'
  • Chinese: localeZh, 'zh'
  • Croatian: localeHr, 'hr'
  • Danish: localeDa, 'da'
  • Dutch: localeNl, 'nl'
  • English: localeEn or undefined, 'en'
  • English (UK): localeEnGB, 'en-GB'
  • Farsi: localeFa, 'fa'
  • German: localeDe, 'de'
  • Greek: localeEl, 'el'
  • Spanish: localeEs, 'es'
  • Finnish: localeFi, 'fi'
  • French: localeFr, 'fr'
  • Hebrew: localeHe, 'he'
  • Hindi: localeHi, 'hi'
  • Hungarian: localeHu, 'hu'
  • Italian: localeIt, 'it'
  • Japanese: localeJa, 'ja'
  • Korean: localeKo, 'ko'
  • Lithuanian: localeLt, 'lt'
  • Norwegian: localeNo, 'no'
  • Polish: localePl, 'pl'
  • Portuguese (Brazilian): localePtBR, 'pt-BR'
  • Portuguese (European): localePtPT, 'pt-PT'
  • Romanian: localeRo, 'ro'
  • Russian: localeRu, 'ru'
  • Russian (UA): localeRuUA, 'ru-UA'
  • Slovak: localeSk, 'sk'
  • Serbian: localeSr, 'sr'
  • Swedish: localeSv, 'sv'
  • Thai: localeTh, 'th'
  • Turkish: localeTr, 'tr'
  • Ukrainian: localeUa, 'ua'

Default value: undefined

rtl​

boolean

Enables right-to-left display.

Default value: false

Events​

The Button component ships with different event hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.

onDestroy​

(args: any, inst: any) => void

Triggered when the component is destroyed.

Parameters:

  • args - The event argument object.

  • inst - The component instance.

onInit​

(args: any, inst: any) => void

Triggered when the component is initialized.

Parameters:

  • args - The event argument object.

  • inst - The component instance.