Success Button
The Success Button signals a positive or successful outcome, styled with a success (typically green) colour. It extends the Base Button and is ideal for confirming actions such as saving or approving.
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.
<button successButton (click)="onConfirm()" mat-raised-button>Confirm</button>API
Extends the base button with green, positive-affirmation styling. All other base inputs and outputs are inherited.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
label | string | 'Update' | Button label text. |
icon | string | 'save' | Material icon name rendered before the label. |
loadingLabel | string | 'Updating...' | Text shown while loading is true. |
classes | string | 'success-button' | CSS classes applied to the button. |
See the Buttons introduction for the shared inputs, outputs and base-button API.
