Button Group

<div class="c-btn-group" x-data="{ active: 'btn-1' }">
    <button class="c-btn" id="btn-1" type="button" @click="active = $el.id" :class="{ 'c-btn--tertiary': active != $el.id }">1st Button</button>
    <button class="c-btn c-btn--tertiary" id="btn-2" type="button" @click="active = $el.id" :class="{ 'c-btn--tertiary': active != $el.id }">2nd Button</button>
    <button class="c-btn c-btn--tertiary" id="btn-3" type="button" @click="active = $el.id" :class="{ 'c-btn--tertiary': active != $el.id }">3rd Button</button>
</div>

<div class="u-inline-block">
    <div class="c-btn-group" x-data="{ active: 'btn-1' }">
        <button class="c-btn" id="btn-1" type="button" @click="active = $el.id" :class="{ 'c-btn--tertiary': active != $el.id }">1st Button</button>
        <button class="c-btn c-btn--tertiary" id="btn-2" type="button" @click="active = $el.id" :class="{ 'c-btn--tertiary': active != $el.id }">2nd Button</button>
        <button class="c-btn c-btn--tertiary" id="btn-3" type="button" @click="active = $el.id" :class="{ 'c-btn--tertiary': active != $el.id }">3rd Button</button>
        <div class="c-btn-group__dropdown"
            x-data="{ drop: false }"
            @keydown.escape.prevent.stop="drop = false"
            @click.outside="drop = false"
            >
            <button class="c-btn c-btn--tertiary" id="btn-4" type="button" aria-label="View More" aria-expanded="false" aria-controls="btn_grp_menu"
                x-ref="btn"
                @click="drop = ! drop"
                :class="{ 'is-active': drop, 'c-btn--tertiary': ! drop }"
                :aria-expanded="drop"
                >
                <svg class="c-btn__icon c-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
                    <path d="M9 17a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm0-6a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm0-6a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z"/>
                </svg>
            </button>
            <div class="c-dropdown c-dropdown--right | t-dropdown--default" style="display: none;"
                x-show="drop"
                x-anchor.bottom-end.offset.10="$refs.btn"
                x-transition
                >
                <ul class="c-dropdown__list | o-list-stacked">
                    <li class="c-dropdown__item | o-list__item">
                        <a class="c-dropdown__link" href="#URL">Option 1</a>
                    </li>
                    <li class="c-dropdown__item | o-list__item">
                        <a class="c-dropdown__link" href="#URL">Option 2</a>
                    </li>
                    <li class="c-dropdown__item | o-list__item">
                        <a class="c-dropdown__link" href="#URL">Option 3</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="u-inline-block">
    <div class="c-btn-group c-btn-group--segmented" x-data="{ active: 'btn-1' }">
        <button class="c-btn" id="btn-1" type="button" @click="active = $el.id" :class="{ 'c-btn--tertiary': active != $el.id }">1st Button</button>
        <button class="c-btn c-btn--tertiary" id="btn-2" type="button" @click="active = $el.id" :class="{ 'c-btn--tertiary': active != $el.id }">2nd Button</button>
        <button class="c-btn c-btn--tertiary" id="btn-3" type="button" @click="active = $el.id" :class="{ 'c-btn--tertiary': active != $el.id }">3rd Button</button>
        
        <div class="c-btn-group__dropdown" aria-expanded="false"
            x-data="{ drop: false }"
            @keydown.escape.prevent.stop="drop = false"
            @click.outside="drop = false"
            >
            <button class="c-btn c-btn--tertiary" id="btn-4" type="button" aria-label="View More" aria-expanded="false" aria-describedby="btn_grp_drop"
                x-ref="btn"
                @click="drop = ! drop" 
                :class="{ 'is-active': drop, 'c-btn--tertiary': ! drop }" 
                :aria-expanded="drop"
                >
                <svg class="c-btn__icon c-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
                    <path fill-rule="nonzero" d="M6 14a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm0-6a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm0-6a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z"/>
                </svg>
            </button>
            <div class="c-dropdown | t-dropdown--default" id="btn_grp_drop" style="display: none;"
                x-show="drop"
                x-anchor.bottom-end.offset.10="$refs.btn"
                x-transition
                >
                <ul class="c-dropdown__list | o-list-stacked">
                    <li class="c-dropdown__item | o-list__item">
                        <a class="c-dropdown__link" href="#URL">Option 1</a>
                    </li>
                    <li class="c-dropdown__item | o-list__item">
                        <a class="c-dropdown__link" href="#URL">Option 2</a>
                    </li>
                    <li class="c-dropdown__item | o-list__item">
                        <a class="c-dropdown__link" href="#URL">Option 3</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="c-btn-group">
    <a class="c-btn" href="#btn-1">Button</a>
    <div class="c-btn-group__dropdown">
        <button class="c-btn" type="button">
            <span class="u-hidden">More</span>
            <svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
                <path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"></path>
            </svg>
        </button>
    </div>
</div>

<div class="c-btn-group c-btn-group--segmented">
    <a class="c-btn" href="#btn-1">Button</a>
    <div class="c-btn-group__dropdown">
        <button class="c-btn" type="button">
            <span class="u-hidden">More</span>
            <svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
                <path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"></path>
            </svg>
        </button>
    </div>
</div>