Button

Buttons allow users to take action.

API

API reference

import { BwcButtonContentModule } from '@aviato/components/button';

Component

<bwc-button-content> </bwc-button-content>

This component is useful when the user clicks on the button and see a loading spinner in the button. But in case when there is long text within the button the width will get smaller when the text is replaced by the spinner. It's a discrepancy in UX.
Adding this component will keep the width when the text is replaced by the spinner. Have a look in Examples tab to see it in action.

Usage

<button [disabled]="isLoading"> <bwc-button-content [loading]="isLoading"> Testing Button Loading Component </bwc-button-content> </button>


Example

Primary

 

Secondary

 

Tertiary

 

Text