graycoreio/daffodil

<div class="custom-select-tabs__buttons">
    <button daff-button size="sm" (click)="selectTabThree()">
        Select Tab 3
    </button>
    
    <button daff-button size="sm" (click)="selectTabFive()">
        Select Tab 5
    </button>
</div>

<daff-tabs aria-label="List of tabs">
    <daff-tab>
        <daff-tab-label>
            <fa-icon [icon]="faInfoCircle" daffPrefix></fa-icon>
            Tab 1
        </daff-tab-label>
        <daff-tab-panel>
            Tab 1 Panel
        </daff-tab-panel>
    </daff-tab>

    <daff-tab>
        <daff-tab-label>
            Tab 2
            <fa-icon [icon]="faInfoCircle" daffSuffix></fa-icon>
        </daff-tab-label>
        <daff-tab-panel>
            Tab 2 Panel
        </daff-tab-panel>
    </daff-tab>

    <daff-tab id="tab-3">
        <daff-tab-label>
            <fa-icon [icon]="faInfoCircle" daffPrefix></fa-icon>
            Tab 3
            <fa-icon [icon]="faInfoCircle" daffSuffix></fa-icon>
        </daff-tab-label>
        <daff-tab-panel>
            Tab 3 Panel
        </daff-tab-panel>
    </daff-tab>

    <daff-tab>
        <daff-tab-label>
            Tab 4
            <fa-icon [icon]="faInfoCircle" daffSuffix></fa-icon>
        </daff-tab-label>
        <daff-tab-panel>
            Tab 4 Panel
        </daff-tab-panel>
    </daff-tab>

    <daff-tab id="tab-5">
        <daff-tab-label>
            Tab 5
            <fa-icon [icon]="faInfoCircle" daffSuffix></fa-icon>
        </daff-tab-label>
        <daff-tab-panel>
            Tab 5 Panel
        </daff-tab-panel>
    </daff-tab>
    
</daff-tabs>