All Buttons Styles API | Mat Expressive

This document outlines API for mat-exp-all-buttons-styles mixin.

Usage

SCSS

@use '@ngm-dev/mat-exp' as mat-exp;

html {
  @include mat-exp.mat-exp-all-buttons-styles($options);
}

Option	Type	Default	Description
`skip-html-element-styles`	`boolean`	`false`	If `true`, the mixin won't apply styles to the underlying HTML elements. Side effects are outlined in each component's Styling section.
`sizes`	list of `'xs' \| 's' \| 'm' \| 'l' \| 'xl'`	`null` (all sizes emitted)	Forwarded unchanged to every underlying button-family mixin that accepts a `sizes` filter (e.g. `mat-exp-button-styles`), applied across every button-family component at once. See Reducing the CSS Payload for measured numbers.
`appearances`	list of `'text' \| 'filled' \| 'outlined' \| 'tonal'`	`null` (all appearances emitted)	Forwarded unchanged to every underlying button-family mixin that accepts an `appearances` filter (e.g. `mat-exp-icon-button-styles`), applied across every button-family component at once.
`colors`	list of `'primary' \| 'secondary' \| 'tertiary'`	`null` (all colors emitted)	Forwarded unchanged to every underlying button-family mixin that accepts a `colors` filter (e.g. `mat-exp-fab-menu-styles`), applied across every button-family component at once.

SCSS

@use '@ngm-dev/mat-exp' as mat-exp;

html {
  @include mat-exp.mat-exp-all-buttons-styles(
    (
      skip-html-element-styles: true,
    )
  );
}

SCSS

@use '@ngm-dev/mat-exp' as mat-exp;

html {
  @include mat-exp.mat-exp-all-buttons-styles(
    (
      sizes: ('s', 'm'),
    )
  );
}