Skip to main content

Switch / Toggle

Sometimes you may want to make a button that can be toggled. An example might be a like button:


<ion-button (click)="liked = !liked" slot="icon">
<ion-icon *ngIf="liked" name="thumbs-up"></ion-icon>
<ion-icon *ngIf="!liked" name="thumbs-up-outline"></ion-icon>

The above example is difficult to understand with a screen reader. To add context here we used role of switch and make sure the toggle state is set using aria-checked.


<div role="switch" [attr.aria-checked]="liked">
<ion-button aria-label="Item is liked" (click)="liked = !liked" slot="icon">
<ion-icon aria-hidden="true" *ngIf="liked" name="thumbs-up"></ion-icon>
<ion-icon aria-hidden="true" *ngIf="!liked" name="thumbs-up-outline"></ion-icon>