Primary Button

The Primary Button is the default call-to-action, styled to stand out as the main action on a page or form with a prominent colour and an optional icon. It extends the Base Button, inheriting the shared loading, disabled and accessibility behaviour.

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="Submit" (click)="onSubmit()" primaryButton mat-raised-button>Submit</button>

<!-- Component -->
<primary-button ariaLabel="Submit" (click)="onSubmit()">Submit</primary-button>

API

Extends the base button, overriding these defaults for the main call-to-action. All other base inputs and outputs are inherited.

Inputs

Name	Type	Default	Description
`label`	`string`	`'Save'`	Button label text.
`icon`	`string`	`'save'`	Material icon name rendered before the label.
`showIcon`	`boolean`	`false`	The primary button hides the leading icon by default.
`loadingLabel`	`string`	`'Saving...'`	Text shown while loading is true.
`classes`	`string`	`'btn-primary primary-button'`	CSS classes applied to the button.

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