Buttons are one of the most essential UI elements in any Angular application. Whether you’re submitting a form, navigating between pages, or triggering an action, Angular Material provides a clean, accessible, and customizable button system that follows the Material Design specification.

In this tutorial, you’ll learn how to use Angular Material buttons—including mat-button, mat-raised-button, mat-flat-button, mat-stroked-button, mat-icon-button, and more. We’ll walk through installation, basic usage, styling techniques, and real-world examples to help you confidently use these components in your Angular projects.

By the end, you’ll understand how each button variant works, when to use them, and how to apply custom themes and CSS to match your application’s design.

Prerequisites and Setup

Before working with Angular Material buttons, make sure your environment is properly configured. Below are the tools and versions recommended for this tutorial.

Prerequisites

To follow along, you should have:

Node.js 18+
Angular CLI 18+ (or the latest version installed globally)
Basic understanding of Angular components, templates, and modules
A working Angular project (new or existing)

If you need to install the Angular CLI, run:

npm install -g @angular/cli

Step 1: Create a New Angular Project

If you don’t have a project yet, create one:

ng new angular-material-buttons
cd angular-material-buttons

Choose SCSS or CSS—both work fine with Angular Material.

Step 2: Install Angular Material

Angular Material provides the mat-button components. Install it using the CLI:

ng add @angular/material

The command will:

Install Angular Material and CDK
Configure animations
Add a Material theme
Update angular.json automatically

Choose any theme—you can change or customize it later.

Step 3: Import `MatButtonModule` into Your Standalone Component

Since Angular 21 uses standalone components, you import Material modules directly into the component where they're used — usually app.component.ts.

Open app.ts:

import { Component, signal } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-root',
  imports: [MatButtonModule],
  templateUrl: './app.html',
  styleUrl: './app.scss'
})
export class App {
  protected readonly title = signal('angular-material-buttons');
}

Now Angular Material buttons are ready to use anywhere in your app.

Understanding Angular Material Button Variants

Angular Material provides several button types, each designed for different use cases and visual hierarchies. All button components use the same directive—mat-button—but change appearance based on the variant you apply.

Below are the most commonly used Material button variants.

1. `mat-button` (Text Button)

A simple, flat button with no background or elevation. Best for low-priority or less prominent actions.

<button mat-button>Text Button</button>

Use cases:

Secondary actions
Dialog cancel buttons
Inline UI actions

2. `mat-raised-button` (Raised Button)

A button with a background color and slight shadow, giving more emphasis.

<button mat-raised-button>Raised Button</button>

Use cases:

Primary actions
Form submissions
Buttons that require visual prominence

3. `mat-flat-button` (Flat Button)

Similar to raised buttons but without elevation. Has a solid background color.

<button mat-flat-button>Flat Button</button>

Use cases:

Primary actions in low-elevation surfaces
Buttons that should stand out without shadow

4. `mat-stroked-button` (Outlined Button)

A transparent button with a visible outline.

<button mat-stroked-button>Stroked Button</button>

Use cases:

Secondary actions
Alternative to text buttons when more definition is needed

5. `mat-icon-button` (Icon-Only Button)

Shows only an icon—no text, circular shape.

<button mat-icon-button>
  <mat-icon>favorite</mat-icon>
</button>

Use cases:

Toolbars
Compact actions
Mobile UI

6. `mat-fab` (Floating Action Button)

A circular, elevated button for the most important action on a page.

<button mat-fab>
  <mat-icon>add</mat-icon>
</button>

Use cases:

Add/create actions
Prominent action in the UI

7. `mat-mini-fab` (Mini Floating Action Button)

A smaller variant of the FAB.

<button mat-mini-fab>
  <mat-icon>edit</mat-icon>
</button>

Use cases:

Small spaces
Secondary FAB actions

Angular Material Buttons Tutorial: mat-button, Variants, and Full Examples - variants

Quick Comparison Table

Variant	Background	Elevation	Border	Best For
`mat-button`	No	No	No	Low-priority actions
`mat-raised-button`	Yes	Yes	No	Primary actions
`mat-flat-button`	Yes	No	No	Subtle primary actions
`mat-stroked-button`	No	No	Yes	Secondary actions
`mat-icon-button`	No	No	No	Icon-only UI
`mat-fab`	Yes	Yes	Circular	Main page action
`mat-mini-fab`	Yes	Yes	Circular	Compact main actions

Basic Usage Examples

Now that you understand the available Angular Material button variants, let’s see how to use them in a real Angular component. Below are simple examples of each button type, allowing you to try them in your project quickly.

Make sure you have imported the MatButtonModule in your standalone component (covered in Section 2).

Example: Text Button (`mat-button`)

<button mat-button>Text Button</button>

This button has no background, no elevation, and is best for low-priority actions.

Example: Raised Button (`mat-raised-button`)

<button mat-raised-button>Raised Button</button>

Raised buttons get more attention thanks to their shadow and background.

Example: Flat Button (`mat-flat-button`)

<button mat-flat-button>Flat Button</button>

Flat buttons are useful when you want a colored button without elevation.

Example: Stroked Button (`mat-stroked-button`)

<button mat-stroked-button>Stroked Button</button>

This button displays a thin outline around the button.

Example: Icon Button (`mat-icon-button`)

Make sure you also import:

import { MatIconModule } from '@angular/material/icon';

Usage:

<button mat-icon-button>
  <mat-icon>home</mat-icon>
</button>

Example: FAB (`mat-fab`)

<button mat-fab>
  <mat-icon>add</mat-icon>
</button>

Use this for the most important action on the screen.

Example: Mini FAB (`mat-mini-fab`)

<button mat-mini-fab>
  <mat-icon>edit</mat-icon>
</button>

A smaller FAB, ideal for secondary or compact actions.

Combine Button Types in One Template

Here’s a grouped example so you can test all variants at once:

<div class="button-demo">
  <button mat-button>Text</button>
  <button mat-raised-button>Raised</button>
  <button mat-flat-button>Flat</button>
  <button mat-stroked-button>Stroked</button>
  <button mat-icon-button>
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-fab>
    <mat-icon>add</mat-icon>
  </button>
  <button mat-mini-fab>
    <mat-icon>edit</mat-icon>
  </button>
</div>

Add optional styling to space them out:

.button-demo button {
  margin-right: 12px;
}

Your basic button examples are now ready.

Using Buttons with Colors and Themes

Angular Material buttons support built-in color variants that integrate with your application’s Material theme. These colors help you visually emphasize primary and secondary actions while maintaining a consistent UI design.

Angular Material supports three main color palettes for buttons:

primary
accent
warn

You can apply them using the color attribute.

1. Applying Built-In Colors

Primary Button

<button mat-raised-button color="primary">Primary</button>

Use this for the main action on a page or dialog.

Accent Button

<button mat-raised-button color="accent">Accent</button>

Often used for secondary but still noticeable actions.

Warn Button

<button mat-raised-button color="warn">Delete</button>

Best for destructive actions like delete or remove.

2. Applying Colors to Other Button Types

All button variants accept the same color property:

Flat Button

<button mat-flat-button color="primary">Save</button>

Stroked Button

<button mat-stroked-button color="accent">Learn More</button>

Icon Button

<button mat-icon-button color="warn">
  <mat-icon>delete</mat-icon>
</button>

FAB Button

<button mat-fab color="primary">
  <mat-icon>add</mat-icon>
</button>

3. Customizing Button Colors with SCSS (Optional)

If you want to override the default Angular Material colors, you can customize your theme.

Open your theme SCSS file (usually theme.scss or styles.scss):

@use '@angular/material' as mat;

$my-primary: mat.define-palette(mat.$indigo-palette, 600);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
  )
));

@include mat.all-component-themes($my-theme);

Now every Material component—including buttons—automatically uses your custom palette.

4. Combining Color + Variant Example

<div class="button-colors">
  <button mat-raised-button color="primary">Primary</button>
  <button mat-stroked-button color="accent">Accent</button>
  <button mat-flat-button color="warn">Warn</button>
</div>

With optional spacing:

.button-colors button {
  margin-right: 12px;
}

Colors and themes are now fully integrated with your Angular Material buttons.

Adding Icons to Buttons

Icons help users quickly understand an action, especially when paired with text. Angular Material makes it easy to add icons to any button type using the mat-icon component.

Before using icons, ensure you have imported the MatIconModule:

import { MatIconModule } from '@angular/material/icon';

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

1. Icon + Text Button

You can place an icon before or after the button label.

<button mat-raised-button color="primary">
  <mat-icon>save</mat-icon>
  Save
</button>

<button mat-raised-button color="accent">
  Edit
  <mat-icon>edit</mat-icon>
</button>

2. Icon-Only Buttons (`mat-icon-button`)

Use this when no label is needed, such as in toolbars or compact UI layouts.

<button mat-icon-button color="primary">
  <mat-icon>menu</mat-icon>
</button>

3. Buttons with SVG Icons

You can also register custom SVG icons.

Step 1: Add your SVG to /assets/icons/save.svg
Step 2: Register it in your component:

import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
  iconRegistry.addSvgIcon(
    'save-icon',
    sanitizer.bypassSecurityTrustResourceUrl('assets/icons/save.svg')
  );
}

Step 3: Use it in the template:

<button mat-raised-button>
  <mat-icon svgIcon="save-icon"></mat-icon>
  Save
</button>

4. FAB Buttons with Icons

FABs typically contain icons to highlight key actions.

<button mat-fab color="primary">
  <mat-icon>add</mat-icon>
</button>

Mini FAB:

<button mat-mini-fab color="accent">
  <mat-icon>edit</mat-icon>
</button>

5. Combining Icons, Colors, and Variants

<button mat-flat-button color="primary">
  <mat-icon>arrow_forward</mat-icon>
  Continue
</button>

<button mat-stroked-button color="warn">
  <mat-icon>delete</mat-icon>
  Delete
</button>

Icons enhance usability and give your buttons a professional polished look.

Disabled and Loading States

Buttons often need to be disabled during form submissions, API calls, or when certain conditions aren’t met. Angular Material makes it easy to handle disabled states, and you can implement custom loading indicators to improve UX during asynchronous actions.

1. Using the Disabled Attribute

To disable any Angular Material button, simply set:

<button mat-raised-button disabled>Disabled Button</button>

Or bind it to a variable:

<button mat-raised-button [disabled]="isDisabled">
  Submit
</button>

In your TypeScript:

isDisabled = true;

This works for all button variants, including FABs, icon buttons, and stroked buttons.

2. Disable Button During API Calls

A common use case is disabling a button while waiting for an HTTP request.

<button mat-raised-button color="primary" [disabled]="loading">
  Save
</button>

loading = false;

save() {
  this.loading = true;

  setTimeout(() => {
    this.loading = false;
  }, 2000);
}

3. Adding a Loading Spinner Inside a Button

Angular Material provides a convenient <mat-progress-spinner> component.
For button loading states, we usually use the indeterminate mode and size it small.

Example: Loading Spinner Button

  <button mat-raised-button color="primary" (click)="save()" [disabled]="loading">
    <mat-progress-spinner
      *ngIf="loading"
      mode="indeterminate"
      diameter="20"
      strokeWidth="3"
    ></mat-progress-spinner>

    @if (!loading) {
    <span>Save</span>
    }
  </button>

Optional styling for alignment:

button mat-progress-spinner {
  margin-right: 8px;
}

This gives a clean professional loading effect similar to Google apps.

4. FAB Loading State

  <button mat-fab [disabled]="loading">
    <mat-progress-spinner
      *ngIf="loading"
      mode="indeterminate"
      diameter="24"
      strokeWidth="3"
    ></mat-progress-spinner>

    @if (!loading) {
    <mat-icon>add</mat-icon>
    }
  </button>

FABs are perfect for actions like "add", but disabling + showing a spinner makes the UI feel responsive.

5. Form-Based Disable Logic

Disable the button until the form is valid:

<button mat-raised-button color="primary" [disabled]="form.invalid">
  Submit
</button>

This ensures the user cannot submit invalid data.

Your buttons now support clean and user-friendly disabled and loading states.

Button Groups and Layout

When building real-world UIs, buttons are often displayed in groups—for example, form actions (Save / Cancel), navigation controls (Previous / Next), or icon groups. Angular Material provides utilities for organizing button layouts that look clean and consistent with Material Design principles.

Below are common patterns and best practices for grouping buttons.

1. Horizontal Button Groups

The simplest way to align buttons horizontally is to wrap them in a container and apply spacing.

<div class="button-group">
  <button mat-raised-button color="primary">Save</button>
  <button mat-stroked-button color="accent">Cancel</button>
</div>

Add spacing with CSS:

.button-group button {
  margin-right: 12px;
}

2. Vertical Button Groups

Useful for mobile interfaces or sidebar actions.

<div class="button-group-vertical">
  <button mat-flat-button color="primary">Option 1</button>
  <button mat-flat-button color="accent">Option 2</button>
  <button mat-flat-button color="warn">Option 3</button>
</div>

CSS:

.button-group-vertical button {
  display: block;
  margin-bottom: 10px;
}

3. Centered Button Group

Often used in forms or dialog actions.

<div class="button-group-center">
  <button mat-stroked-button>Back</button>
  <button mat-raised-button color="primary">Next</button>
</div>

CSS:

.button-group-center {
  display: flex;
  justify-content: center;
  gap: 12px;
}

4. Space Between Buttons

Useful when you want buttons spread across the container width.

<div class="button-space-between">
  <button mat-raised-button color="primary">Previous</button>
  <button mat-raised-button color="primary">Next</button>
</div>

CSS:

.button-space-between {
  display: flex;
  justify-content: space-between;
}

5. Wrapping Buttons on Small Screens (Responsive)

Flexbox helps when buttons must wrap across rows.

<div class="button-wrap">
  <button mat-button>One</button>
  <button mat-button>Two</button>
  <button mat-button>Three</button>
  <button mat-button>Four</button>
</div>

CSS:

.button-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

6. Button Toggle Groups (Segmentation)

Angular Material includes the mat-button-toggle component for grouped toggle buttons.

Import Module:

import { MatButtonToggleModule } from '@angular/material/button-toggle';

Usage:

<mat-button-toggle-group name="format">
  <mat-button-toggle value="bold">Bold</mat-button-toggle>
  <mat-button-toggle value="italic">Italic</mat-button-toggle>
  <mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>

This behaves like a segmented control (iOS-style option switches).

7. Toolbar with Buttons

Buttons are also commonly placed inside mat-toolbar.

<mat-toolbar color="primary">
  <button mat-icon-button><mat-icon>menu</mat-icon></button>
  <span>My App</span>
  <span class="spacer"></span>
  <button mat-raised-button color="accent">Login</button>
</mat-toolbar>

CSS:

.spacer {
  flex: 1 1 auto;
}

Button groups help create clean, well-structured interfaces that users intuitively understand.

Customizing Buttons with CSS

While Angular Material provides a clean, consistent design system, you’ll often need to adjust button styles to match your application’s branding or UI requirements. Angular Material buttons are flexible and can be customized with simple CSS or more advanced SCSS overrides.

Below are the most common customization techniques.

1. Adding Custom Classes

The easiest way to customize an Angular Material button is by adding your own class.

<button mat-raised-button class="my-button">Custom Button</button>

Example CSS:

.my-button {
  background-color: #3f51b5;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
}

2. Changing Button Size (Small, Medium, Large)

Angular Material does not include built-in sizing utilities for buttons, but you can add them easily.

<button mat-raised-button class="btn-sm">Small</button>
<button mat-raised-button class="btn-lg">Large</button>

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 18px;
}

3. Custom Rounded Buttons (Pill, Circle, etc.)

Pill-Shaped Button

.btn-pill {
  border-radius: 50px;
}

Usage:

<button mat-stroked-button class="btn-pill">Pill Button</button>

Fully Circular Button (Text + Icon)

.btn-circle {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  padding: 0;
}

Usage:

<button mat-raised-button class="btn-circle">
  <mat-icon>check</mat-icon>
</button>

4. Custom Hover and Active Effects

.btn-hover {
  transition: background-color 0.3s ease;
}

.btn-hover:hover {
  background-color: #673ab7;
  color: white;
}

.btn-hover:active {
  opacity: 0.8;
}

Usage:

<button mat-button class="btn-hover">Hover Me</button>

5. Overriding Angular Material Styles (Deep Styling)

Sometimes you need to override internal Material styles.
Use the ::ng-deep selector cautiously (or move styles to global styles).

Example: Customizing `mat-stroked-button` Border

::ng-deep .mat-mdc-outlined-button {
  border-color: #4caf50 !important;
}

Example: Change Icon Button Size

::ng-deep .mat-mdc-icon-button {
  width: 40px;
  height: 40px;
}

Note: Prefer using global styles (styles.scss) for deep overrides to avoid breaking encapsulation.

6. Adding Custom Ripple Colors

Angular Material adds a ripple effect by default. You can customize its color:

<button mat-raised-button class="custom-ripple">
  Ripple Button
</button>

.custom-ripple .mat-ripple-element {
  background-color: rgba(255, 0, 0, 0.3); /* red ripple */
}

7. CSS Variables for Quick Theming

If your app uses custom branding, CSS variables help unify your button style.

:root {
  --primary-btn-bg: #2196f3;
  --primary-btn-text: #ffffff;
}

.btn-theme {
  background-color: var(--primary-btn-bg);
  color: var(--primary-btn-text);
}

Usage:

<button mat-raised-button class="btn-theme">Theme Button</button>

Customizing Angular Material buttons is simple and powerful—allowing your UI to be both functional and visually unique.

Real-World Examples

In real-world Angular applications, buttons are used for far more than simple clicks. Below are practical use cases showing how Angular Material buttons integrate with forms, dialogs, toolbars, navigation, uploads, and API actions.

These examples help you apply Material Buttons in production-ready scenarios.

1. Submit and Cancel Buttons in Forms

<form (ngSubmit)="submitForm()" #myForm="ngForm">
  <mat-form-field>
    <input matInput placeholder="Name" name="name" ngModel required>
  </mat-form-field>

  <div class="form-actions">
    <button mat-stroked-button type="button">Cancel</button>
    <button mat-raised-button color="primary" type="submit" [disabled]="myForm.invalid">
      Submit
    </button>
  </div>
</form>

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatToolbarModule } from '@angular/material/toolbar';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  imports: [FormsModule, MatFormFieldModule, MatToolbarModule, MatButtonModule, MatIconModule, MatCardModule, MatProgressSpinnerModule, MatButtonToggleModule],
  templateUrl: './app.html',
  styleUrl: './app.scss'
})
export class App {
  protected readonly title = signal('angular-material-buttons');
  isDisabled = true;
  loading = false;

  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
      'save-icon',
      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/save.svg')
    );
  }

  save() {
    this.loading = true;

    setTimeout(() => {
      this.loading = false;
    }, 2000);
  }

  submitForm() {
    alert('Form submitted!');
  }
}

This is one of the most common UI patterns.

2. Buttons in Toolbars

<mat-toolbar color="primary">
  <button mat-icon-button><mat-icon>menu</mat-icon></button>

  <span>Dashboard</span>

  <span class="spacer"></span>

  <button mat-button>Login</button>
  <button mat-raised-button color="accent">Sign Up</button>
</mat-toolbar>

.spacer {
  flex: 1 1 auto;
}

Material buttons work naturally inside toolbars.

3. Navigation Buttons (RouterLink)

Use buttons as navigation elements.

<button mat-raised-button color="primary" routerLink="/products">
  <mat-icon>store</mat-icon>
  Products
</button>

<button mat-stroked-button routerLink="/settings">
  <mat-icon>settings</mat-icon>
  Settings
</button>

You can also add query params or fragments.

4. Confirmation Dialog with Action Buttons

openDeleteDialog() {
  this.dialog.open(DeleteDialogComponent);
}

Dialog UI:

<h2 mat-dialog-title>Delete Item?</h2>

<mat-dialog-content>
  This action cannot be undone.
</mat-dialog-content>

<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancel</button>
  <button mat-raised-button color="warn" [mat-dialog-close]="true">
    Delete
  </button>
</mat-dialog-actions>

Dialogs almost always rely on Material buttons.

5. File Upload Button (Styled Input)

Angular Material doesn't include a native upload button, but you can create one easily.

<input type="file" hidden #fileUpload (change)="uploadFile($event)" />

<button mat-raised-button color="primary" (click)="fileUpload.click()">
  <mat-icon>upload</mat-icon>
  Upload File
</button>

This gives you a modern, accessible file picker button.

6. API Action Button With Loading State

<button mat-raised-button color="primary"
        (click)="saveData()"
        [disabled]="loading">

  <mat-progress-spinner
    *ngIf="loading"
    mode="indeterminate"
    diameter="20"
    strokeWidth="3">
  </mat-progress-spinner>

  <span *ngIf="!loading">Save Changes</span>
</button>

Great for update/save actions in CRUD apps.

7. Floating Action Button for Add/Create

FABs work well in dashboards or list pages.

<button mat-fab color="accent" class="fab-add" (click)="createItem()">
  <mat-icon>add</mat-icon>
</button>

.fab-add {
  position: fixed;
  right: 24px;
  bottom: 24px;
}

A common pattern in Material Design apps.

8. Icon Buttons for Table Actions

Common in Angular Material tables.

<button mat-icon-button color="primary" (click)="edit(row)">
  <mat-icon>edit</mat-icon>
</button>

<button mat-icon-button color="warn" (click)="delete(row)">
  <mat-icon>delete</mat-icon>
</button>

Small, clean, and easy for row-based actions.

These examples cover the most frequent scenarios you’ll encounter in modern Angular projects.
Your readers now have everything they need to build real, polished UIs.

Conclusion

Angular Material buttons provide a powerful, flexible, and visually consistent way to build interactive user interfaces in modern Angular applications. From simple text buttons to raised, stroked, icon, and floating action buttons, each variant is designed to fit a specific purpose in the Material Design system.

In this tutorial, you learned how to:

Install and configure Angular Material in a standalone Angular 21 project
Use all major button variants (mat-button, mat-raised-button, mat-flat-button, mat-stroked-button, mat-icon-button, mat-fab, and mat-mini-fab)
Apply colors, themes, and custom styles
Add icons, disabled states, and loading spinners
Organize buttons in groups and layouts
Implement real-world examples like forms, dialogs, toolbars, navigation, and CRUD actions

With these skills, you can now confidently create clean, consistent, and user-friendly button interfaces that follow best practices and Material Design guidelines.

You can find the full source code on our GitHub.

=======

If you don’t want to waste your time designing your front-end or your budget to spend by hiring a web designer, then Angular Templates is the best place to go. So, speed up your front-end web development with premium Angular templates. Choose your template for your front-end project here.

That's just the basics. If you need more deep learning about Angular, you can take the following cheap course:

Thanks!

Angular Material Buttons Tutorial: mat-button, Variants, and Full Examples

Learn how to use Angular Material buttons with mat-button, variants, colors, icons, and real examples. A complete guide for Angular 21 developers.

Table of Contents:

Prerequisites and Setup

Prerequisites

Step 1: Create a New Angular Project

Step 2: Install Angular Material

Step 3: Import MatButtonModule into Your Standalone Component

Understanding Angular Material Button Variants

1. mat-button (Text Button)

2. mat-raised-button (Raised Button)

3. mat-flat-button (Flat Button)

4. mat-stroked-button (Outlined Button)

5. mat-icon-button (Icon-Only Button)

6. mat-fab (Floating Action Button)

7. mat-mini-fab (Mini Floating Action Button)

Quick Comparison Table

Basic Usage Examples

Example: Text Button (mat-button)

Example: Raised Button (mat-raised-button)

Example: Flat Button (mat-flat-button)

Example: Stroked Button (mat-stroked-button)

Example: Icon Button (mat-icon-button)

Example: FAB (mat-fab)

Example: Mini FAB (mat-mini-fab)

Combine Button Types in One Template

Using Buttons with Colors and Themes

1. Applying Built-In Colors

Primary Button

Accent Button

Warn Button

2. Applying Colors to Other Button Types

Flat Button

Stroked Button

Icon Button

FAB Button

3. Customizing Button Colors with SCSS (Optional)

4. Combining Color + Variant Example

Adding Icons to Buttons

1. Icon + Text Button

2. Icon-Only Buttons (mat-icon-button)

3. Buttons with SVG Icons

Step 3: Use it in the template:

4. FAB Buttons with Icons

5. Combining Icons, Colors, and Variants

Disabled and Loading States

1. Using the Disabled Attribute

2. Disable Button During API Calls

3. Adding a Loading Spinner Inside a Button

Example: Loading Spinner Button

Optional styling for alignment:

4. FAB Loading State

5. Form-Based Disable Logic

Button Groups and Layout

1. Horizontal Button Groups

2. Vertical Button Groups

3. Centered Button Group

4. Space Between Buttons

5. Wrapping Buttons on Small Screens (Responsive)

6. Button Toggle Groups (Segmentation)

Import Module:

Usage:

7. Toolbar with Buttons

Customizing Buttons with CSS

1. Adding Custom Classes

2. Changing Button Size (Small, Medium, Large)

3. Custom Rounded Buttons (Pill, Circle, etc.)

Pill-Shaped Button

Fully Circular Button (Text + Icon)

4. Custom Hover and Active Effects

5. Overriding Angular Material Styles (Deep Styling)

Example: Customizing mat-stroked-button Border

Example: Change Icon Button Size

6. Adding Custom Ripple Colors

7. CSS Variables for Quick Theming

Real-World Examples

1. Submit and Cancel Buttons in Forms

2. Buttons in Toolbars

3. Navigation Buttons (RouterLink)

4. Confirmation Dialog with Action Buttons

Step 3: Import `MatButtonModule` into Your Standalone Component

1. `mat-button` (Text Button)

2. `mat-raised-button` (Raised Button)

3. `mat-flat-button` (Flat Button)

4. `mat-stroked-button` (Outlined Button)

5. `mat-icon-button` (Icon-Only Button)

6. `mat-fab` (Floating Action Button)

7. `mat-mini-fab` (Mini Floating Action Button)

Example: Text Button (`mat-button`)

Example: Raised Button (`mat-raised-button`)

Example: Flat Button (`mat-flat-button`)

Example: Stroked Button (`mat-stroked-button`)

Example: Icon Button (`mat-icon-button`)

Example: FAB (`mat-fab`)

Example: Mini FAB (`mat-mini-fab`)

2. Icon-Only Buttons (`mat-icon-button`)

Example: Customizing `mat-stroked-button` Border