<x-tabs wire:model="selectedTab">
    <x-tab name="users-tab" label="Users" icon="o-users">
        <div>Users</div>
    </x-tab>
    <x-tab name="tricks-tab" label="Tricks" icon="o-sparkles">
        <div>Tricks</div>
    </x-tab>
    <x-tab name="musics-tab" label="Musics" icon="o-musical-note">
        <div>Musics</div>
    </x-tab>
</x-tabs>
<hr class="my-5 border-base-300">
 
<x-button label="Change to Musics" @click="$wire.selectedTab = 'musics-tab'" />

<x-tabs wire:model="myTab">
    <x-tab name="users-tab">
        <x-slot:label>  
            Users
            <x-badge value="3" class="badge-primary badge-sm" />
        </x-slot:label>
 
        <div>Users</div>
    </x-tab>
    <x-tab name="tricks-tab" label="Tricks">
        <div>Tricks</div>
    </x-tab>
    <x-tab name="musics-tab" label="Musics">
        <div>Musics</div>
    </x-tab>
</x-tabs>

<x-tabs wire:model="someTab">
    <x-tab name="users-tab" label="Users">
        <div>Users</div>
    </x-tab>
    <x-tab name="tricks-tab" label="Tricks">
        <div>Tricks</div>
    </x-tab>
    <x-tab name="musics-tab" label="Musics">
        <div>Musics</div>
    </x-tab>
    <x-tab name="stars-tab" label="Stars" disabled>
        <div>Stars</div>
    </x-tab>
</x-tabs>

<x-tabs wire:model="someTab">
    <x-tab name="users-tab" label="Users">
        <div>Users</div>
    </x-tab>
    <x-tab name="tricks-tab" label="Tricks" hidden>
        <div>Tricks</div>
    </x-tab>
    <x-tab name="musics-tab" label="Musics">
        <div>Musics</div>
    </x-tab>
</x-tabs>

<x-tabs
    wire:model="tabSelected"
    active-class="bg-primary rounded !text-white"
    label-class="font-semibold"
    label-div-class="bg-primary/5 rounded w-fit p-2"
>
    <x-tab name="users-tab" label="Users">
        <div>All</div>
    </x-tab>
    <x-tab name="tricks-tab" label="Tricks">
        <div>Tricks</div>
    </x-tab>
    <x-tab name="musics-tab" label="Musics">
        <div>Musics</div>
    </x-tab>
</x-tabs>