askvity

How to Change Angular Material Button Size?

Published in Angular Material Styling 3 mins read

You can change the size of an Angular Material button by creating custom size variants using SCSS and applying them to your buttons. While Angular Material offers density options, for completely custom sizes beyond the default, defining your own styles is the common approach.

Here's how you can implement custom size variants, incorporating the method suggested in the provided reference:

1. Create a File for Size Variants

Following the approach in the reference, create an SCSS file specifically for your custom button sizes.

  • Create a file at src/styles/sizes/_index.scss.

  • Add the following content to this file, which includes importing Angular Material's styling functions:

    // src/styles/sizes/_index.scss
@use "@angular/material" as mat;

// Define your custom sizes here.
// Example for a 'small' size:
@mixin custom-small-button-size($config) {
  .mat-mdc-button.mat-mdc-button-sm,
  .mat-mdc-raised-button.mat-mdc-button-sm,
  .mat-mdc-stroked-button.mat-mdc-button-sm,
  .mat-mdc-flat-button.mat-mdc-button-sm {
    padding: 0 8px; // Adjust padding
    min-width: 64px; // Adjust min-width
    height: 28px;   // Adjust height
    line-height: 28px; // Adjust line-height
    font-size: 0.75rem; // Adjust font size

    .mat-button-wrapper {
       // Optional: Adjust content alignment/spacing
    }
  }
}

// Example for a 'large' size:
 @mixin custom-large-button-size($config) {
   .mat-mdc-button.mat-mdc-button-lg,
   .mat-mdc-raised-button.mat-mdc-button-lg,
   .mat-mdc-stroked-button.mat-mdc-button-lg,
   .mat-mdc-flat-button.mat-mdc-button-lg {
     padding: 0 24px;
     min-width: 120px;
     height: 48px;
     line-height: 48px;
     font-size: 1rem;
   }
 }

// Include the custom size mixins in your theme or globally
@mixin apply-custom-button-sizes($config) {
  @include custom-small-button-size($config);
  @include custom-large-button-size($config);
  // Include other custom sizes here
}

// If you're not using a custom theme file, you can apply them globally
// using a dummy config. This might be placed elsewhere depending on your setup.
// @include apply-custom-button-sizes(null);

    Note: The .mat-mdc-button classes are used for the newer MDC-based components introduced in Angular Material v15+. Adjust selectors if you are using legacy components (e.g., .mat-button).

2. Import the Size File

The next crucial step, as highlighted in the reference, is to import your newly created size file into your main styles file (src/styles.scss).

  • Open src/styles.scss.

  • Add the following import statement:

    // src/styles.scss
@use "./styles/sizes";

// You might need to include the custom sizes within your theme setup
// if you are managing themes. For example:
// @use '@angular/material' as mat;
// @use './styles/my-theme' as my-theme;
// @include mat.core();
// @include mat.all-component-themes(my-theme.$my-app-theme);
// @include sizes.apply-custom-button-sizes(null); // Apply custom sizes after themes

    Note: The exact location and method for including sizes.apply-custom-button-sizes(null); might vary based on whether you are using a custom theme file (my-theme.scss) or applying styles directly in styles.scss. The null config is a placeholder if the mixin doesn't depend on the theme palette.

3. Apply the Custom Size to Buttons

Once the custom sizes are defined and imported, you can apply them to your Angular Material buttons by adding the corresponding custom class.

  • In your HTML template, add the custom class (e.g., mat-mdc-button-sm for the small size, mat-mdc-button-lg for the large size) alongside the standard Material button directives.

    <button mat-button class="mat-mdc-button-sm">Small Button</button>
<button mat-raised-button color="primary">Default Size Button</button>
<button mat-stroked-button class="mat-mdc-button-lg" color="accent">Large Button</button>

By following these steps, you create specific CSS rules for classes like .mat-mdc-button-sm or .mat-mdc-button-lg that override the default size properties (padding, height, font-size, etc.) of Angular Material buttons when those classes are applied.

Related Articles