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>


Examples

Primary

Storybook failed to load. Please connect to the VPN to access.

 

Secondary

Storybook failed to load. Please connect to the VPN to access.

 

Tertiary

Storybook failed to load. Please connect to the VPN to access.

 

Text

Storybook failed to load. Please connect to the VPN to access.