Button

Angular Material Button is a versatile, customizable component used to trigger actions, navigate to links, or submit forms.

The Button component is one of the most heavily customized components in BuilderKit. While Angular Material offers a wide range of styles and configurations, that flexibility can easily lead to inconsistency in real-world projects.

BuilderKit simplifies this by combining appearance and color into a single concept. Instead of juggling variants and tones, you choose from four clearly defined button types: primary, secondary (default), tertiary, and link.

Each type defines both the visual appearance and the color logic to keep things predictable and consistent. All types also support a destructive variant for critical actions.

Button Playground

Button Code

The class attribute is used to apply the appearance, size, and destructive state. You can play with the options in the playground above to see how the code changes.

<!-- Label only -->
<button matButton>
  Button
</button>

<!-- Icon only -->
<button matButton>
  <mat-icon svgIcon="circle-user"/>
</button>

<!-- Leading icon -->
<button matButton>
  <mat-icon svgIcon="check"/>
  Button
</button>

<!-- Trailing icon -->
<button matButton>
  <mat-icon svgIcon="chevron-down" iconPositionEnd/>
  Button
</button>

<!-- Leading & trailing icons -->
<button matButton>
  <mat-icon svgIcon="check"/>
  <mat-icon svgIcon="chevron-down" iconPositionEnd/>
  Button
</button>

Icon Button Playground

Icon Button Code

The class attribute is used to apply the appearance, size, and destructive state. You can play with the options in the playground above to see how the code changes.

<!-- button -->
<button matIconButton>
  <mat-icon svgIcon="circle-user"/>
</button>

<!-- link -->
<a matIconButton>
  <mat-icon svgIcon="circle-user"/>
</a>

FAB Playground

FABs Code

<!-- FAB -->
<button matFab>
  <mat-icon svgIcon="user-round-plus"/>
</button>

<!-- Mini FAB -->
<button matMiniFab>
  <mat-icon svgIcon="user-round-plus"/>
</button>

<!-- Extended FAB -->
<button matFab extended>
  <mat-icon svgIcon="user-round-plus"/>
  Add user
</button>