Skip to main content
Material Design button component. Users interact with a button to perform an action.

​
Import

import { MatButton } from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';

​
Basic Usage

<button mat-button>Text Button</button>
<button mat-raised-button>Elevated Button</button>
<button mat-flat-button>Filled Button</button>
<button mat-stroked-button>Outlined Button</button>

​
Appearance

Buttons support multiple appearance styles through the matButton attribute: 
<!-- Text appearance (default) -->
<button matButton="text">Text</button>

<!-- Filled appearance -->
<button matButton="filled">Filled</button>

<!-- Elevated appearance -->
<button matButton="elevated">Elevated</button>

<!-- Outlined appearance -->
<button matButton="outlined">Outlined</button>

<!-- Tonal appearance -->
<button matButton="tonal">Tonal</button>

​
API Reference

​
MatButton

Selector: button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] Exported as: matButton, matAnchor

​
Properties

NameTypeDescription
@Input() appearanceMatButtonAppearanceAppearance of the button. Options: ‘text’, ‘filled’, ‘elevated’, ‘outlined’, ‘tonal’
@Input() colorThemePaletteTheme color. Options: ‘primary’, ‘accent’, ‘warn’
@Input() disabledbooleanWhether the button is disabled
@Input() disableRipplebooleanWhether ripples are disabled

​
Types

type MatButtonAppearance = 'text' | 'filled' | 'elevated' | 'outlined' | 'tonal';

​
Examples

​
With Icons

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

​
Anchor Button

<a mat-button href="https://example.com">Link Button</a>

​
Disabled State

<button mat-button [disabled]="true">Disabled</button>

​
Accessibility

  • Use semantic <button> elements for actions
  • Use <a> elements for navigation
  • Provide clear, descriptive button text
  • Use aria-label for icon-only buttons

Build docs developers (and LLMs) love

Get started for freeTalk to us