Delete Button

The Delete Button triggers destructive actions, styled with a danger colour and a delete (trash) icon. It extends the Base Button and surfaces a “Deleting…” loading label.

Overview

Examples

Usage

Use the button through its directive selector on any element, or through its component selector. The directive form is preferred for new code; the component form remains supported.

html

<!-- Directive (preferred) -->
<button ariaLabel="Delete item" (click)="onDelete()" deleteButton mat-raised-button>Delete</button>

<!-- Component -->
<delete-button ariaLabel="Delete item" (click)="onDelete()"></delete-button>

API

A destructive delete button, extending the base button. All other base inputs and outputs are inherited.

Inputs

Name	Type	Default	Description
`label`	`string`	`'Delete'`	Button label text.
`icon`	`string`	`'delete'`	Material icon name rendered before the label.
`loadingLabel`	`string`	`'Deleting...'`	Text shown while loading is true.
`classes`	`string`	`'delete-button'`	CSS classes applied to the button.

See the Buttons introduction for the shared inputs, outputs and base-button API.