Segmented Controls

<div class="uk-segmented">
    <button class="uk-segmented-item active">Day</button>
    <button class="uk-segmented-item">Week</button>
    <button class="uk-segmented-item">Month</button>
    <button class="uk-segmented-item">Year</button>
</div>

<style>
    .uk-segmented {
        display: inline-flex;
        padding: 0.25rem;
        background: #f1f5f9;
        border-radius: 999px;
        gap: 0.15rem;
    }
    .uk-segmented-item {
        padding: 0.45rem 1rem;
        border-radius: 999px;
        background: transparent;
        border: 0;
        font-size: 0.83rem;
        font-weight: 600;
        color: #64748b;
        cursor: pointer;
        transition: all 0.15s;
    }
    .uk-segmented-item:hover { color: #1e3a8a; }
    .uk-segmented-item.active {
        background: #fff;
        color: #1e3a8a;
        box-shadow: 0 2px 6px rgba(30, 58, 138, 0.08);
    }
</style>

<div class="uk-segmented">
    <button class="uk-segmented-item active"><i class="fas fa-list"></i></button>
    <button class="uk-segmented-item"><i class="fas fa-table-cells"></i></button>
    <button class="uk-segmented-item"><i class="fas fa-bars"></i></button>
</div>

<div class="uk-segmented uk-segmented-primary">
    <button class="uk-segmented-item active">One</button>
    <button class="uk-segmented-item">Two</button>
</div>

<style>
    .uk-segmented-primary .uk-segmented-item.active {
        background: #1e3a8a;
        color: #fff;
    }
    .uk-segmented-success .uk-segmented-item.active {
        background: #059669;
        color: #fff;
    }
</style>

<div class="uk-segmented uk-segmented-full">
    <button class="uk-segmented-item active">
        <i class="fas fa-credit-card"></i> Card
    </button>
    <button class="uk-segmented-item">
        <i class="fab fa-paypal"></i> PayPal
    </button>
</div>

<style>
    .uk-segmented-full {
        display: flex;
        width: 100%;
        border-radius: 0.65rem;
    }
    .uk-segmented-full .uk-segmented-item {
        flex: 1;
        border-radius: 0.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
</style>

<div class="uk-segmented">
    <button class="uk-segmented-item active">
        All <span class="uk-segmented-count">128</span>
    </button>
    <button class="uk-segmented-item">
        Active <span class="uk-segmented-count">42</span>
    </button>
</div>

<style>
    .uk-segmented-count {
        display: inline-block;
        background: rgba(30, 58, 138, 0.1);
        color: #1e3a8a;
        font-size: 0.68rem;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 999px;
        margin-left: 6px;
    }
    .uk-segmented-item.active .uk-segmented-count {
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
    }
    .uk-segmented-primary .uk-segmented-item.active .uk-segmented-count {
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
    }
</style>