NG Kit

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.

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
<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

NameTypeDefaultDescription
labelstring'Update'Button label text.
iconstring'save'Material icon name rendered before the label.
loadingLabelstring'Updating...'Text shown while loading is true.
classesstring'success-button'CSS classes applied to the button.