Button Groups

<div class="uk-bgroup">
    <button class="uk-bgroup-btn"><i class="fas fa-bold"></i></button>
    <button class="uk-bgroup-btn"><i class="fas fa-italic"></i></button>
    <button class="uk-bgroup-btn uk-bgroup-active"><i class="fas fa-underline"></i></button>
    <button class="uk-bgroup-btn"><i class="fas fa-strikethrough"></i></button>
</div>

<style>
    .uk-bgroup { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 0.5rem; overflow: hidden; }
    .uk-bgroup-btn {
        padding: 0.5rem 0.875rem; background: #fff; border: none;
        border-right: 1px solid #cbd5e1; color: #475569;
        cursor: pointer; transition: all 0.15s; font-size: 1rem;
    }
    .uk-bgroup-btn:last-child { border-right: none; }
    .uk-bgroup-btn:hover { background: #f8fafc; color: #0f172a; }
    .uk-bgroup-active { background: #eef2f8; color: #1e3a8a; }
</style>

<div class="uk-bgroup uk-bgroup-primary">
    <button class="uk-bgroup-btn uk-bgroup-active">Day</button>
    <button class="uk-bgroup-btn">Week</button>
    <button class="uk-bgroup-btn">Month</button>
</div>

<style>
    .uk-bgroup { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 0.5rem; overflow: hidden; }
    .uk-bgroup-btn {
        padding: 0.5rem 1.25rem; background: #fff; border: none;
        border-right: 1px solid #cbd5e1; color: #475569;
        font-weight: 600; font-size: 0.9rem;
        cursor: pointer; transition: all 0.15s;
    }
    .uk-bgroup-btn:last-child { border-right: none; }
    .uk-bgroup-btn:hover { background: #f8fafc; color: #0f172a; }
    .uk-bgroup-primary .uk-bgroup-active { background: #1e3a8a; color: #fff; }
    .uk-bgroup-primary .uk-bgroup-active:hover { background: #0f2a5c; }
</style>

<div class="uk-bgroup-vertical">
    <button class="uk-bgroup-btn">Top</button>
    <button class="uk-bgroup-btn">Middle</button>
    <button class="uk-bgroup-btn">Bottom</button>
</div>

<style>
    .uk-bgroup-vertical { display: inline-flex; flex-direction: column; border: 1px solid #cbd5e1; border-radius: 0.5rem; overflow: hidden; }
    .uk-bgroup-btn {
        padding: 0.5rem 1.25rem; background: #fff; border: none;
        border-bottom: 1px solid #cbd5e1; color: #475569;
        font-weight: 500; font-size: 0.9rem;
        cursor: pointer; transition: all 0.15s; text-align: left;
    }
    .uk-bgroup-btn:last-child { border-bottom: none; }
    .uk-bgroup-btn:hover { background: #f8fafc; color: #0f172a; }
</style>

<div class="uk-bgroup uk-bgroup-rounded">
    <button class="uk-bgroup-btn"><i class="fas fa-align-left"></i></button>
    <button class="uk-bgroup-btn uk-bgroup-active"><i class="fas fa-align-center"></i></button>
    <button class="uk-bgroup-btn"><i class="fas fa-align-right"></i></button>
</div>

<style>
    .uk-bgroup { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 0.5rem; overflow: hidden; }
    .uk-bgroup-rounded { border-radius: 999px; }
    .uk-bgroup-btn {
        padding: 0.5rem 1rem; background: #fff; border: none;
        border-right: 1px solid #cbd5e1; color: #475569;
        cursor: pointer; transition: all 0.15s; font-size: 1rem;
    }
    .uk-bgroup-btn:last-child { border-right: none; }
    .uk-bgroup-btn:hover { background: #f8fafc; color: #0f172a; }
    .uk-bgroup-active { background: #f1f5f9; color: #1e3a8a; }
</style>

<div class="uk-bgroup-outline">
    <button class="uk-bgroup-btn">Left</button>
    <button class="uk-bgroup-btn uk-bgroup-active">Center</button>
    <button class="uk-bgroup-btn">Right</button>
</div>

<style>
    .uk-bgroup-outline { display: inline-flex; gap: 0.5rem; }
    .uk-bgroup-btn {
        padding: 0.5rem 1rem; background: transparent; border: 1px solid #cbd5e1;
        border-radius: 0.5rem; color: #475569; font-weight: 500; font-size: 0.9rem;
        cursor: pointer; transition: all 0.15s;
    }
    .uk-bgroup-btn:hover { border-color: #94a3b8; color: #0f172a; }
    .uk-bgroup-active { border-color: #1e3a8a; color: #1e3a8a; font-weight: 600; background: #eef2f8; }
</style>

<div class="uk-bgroup-soft">
    <button class="uk-bgroup-btn">Preview</button>
    <button class="uk-bgroup-btn uk-bgroup-active">Code</button>
</div>

<style>
    .uk-bgroup-soft { display: inline-flex; background: #f1f5f9; padding: 0.25rem; border-radius: 0.5rem; }
    .uk-bgroup-btn {
        padding: 0.4rem 1rem; background: transparent; border: none;
        border-radius: 0.35rem; color: #64748b; font-weight: 500; font-size: 0.9rem;
        cursor: pointer; transition: all 0.15s;
    }
    .uk-bgroup-btn:hover { color: #0f172a; }
    .uk-bgroup-active { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
</style>