Clr Button, state pressed

Question

is there an easy way to change the style of a button? so it looks pressed? I'm using clr-button from clarity project, I have several buttons on the page and my boss wants that the non pressed button to take the style of a secondary button, and the pressed one should look like a primary-button.

These are the buttons:

<div id="StatusButtons">
<clr-button-group>
    <clr-button (click)="externalFilterChanged('Upcoming', 'Stipulations')">Upcoming</clr-button>
    <clr-button (click)="externalFilterChanged('Overdue', 'Stipulations')">Overdue</clr-button>
    <clr-button (click)="externalFilterChanged()">All</clr-button>
</clr-button-group>
<clr-button-group>
    <clr-button (click)="externalFilterChanged('PA', 'Type')">PA</clr-button>
    <clr-button (click)="externalFilterChanged('MOA', 'Type')">MOA</clr-button>
    <clr-button (click)="externalFilterChanged('MOU', 'Type')">MOU</clr-button>
    <clr-button (click)="externalFilterChanged('Covenant', 'Type')">Cov</clr-button>
    <clr-button (click)="externalFilterChanged('BSC', 'Type')">BSC</clr-button>
    <clr-button (click)="externalFilterChanged()">All</clr-button>
</clr-button-group>
<clr-button-group>
    <clr-button (click)="externalFilterChanged('Opened', 'Status')">Opended</clr-button>
    <clr-button (click)="externalFilterChanged('Approval', 'Status')">Approval</clr-button>
    <clr-button (click)="externalFilterChanged('Monitoring', 'Status')">Monitoring</clr-button>
    <clr-button (click)="externalFilterChanged('Closed', 'Status')">Closed</clr-button>
    <clr-button (click)="externalFilterChanged()">All</clr-button>
</clr-button-group>
</div>

if they were only two I thought perhaps in a boolean to toggle between the class="btn" and class="btn btn-primary" but since they are several I'm kind of lost.

Here is the link for the buttons from clarity, or if there's another way to make it look pressed please tell me, maybe it could work too.

Answer 1

Something like below should do the tick:

<div class="btn-group">
    <button class="btn" [class.btn-primary]="true">
       one
    </button>
    <button class="btn" [class.btn-primary]="false">
        two
    </button>
    <button class="btn" [class.btn-primary]="false">
       three
    </button>
</div>