14 Expandable Button

The Expandable Button allows you to design an experience that supports multiple actions from a dropdown; select an existing value or create a new value. On selection of "New" the experience may lead the user to a new page, open a modal, or expand an input field, depending on the data that needs to be displayed once a user clicks "New".

14.1 Inline layout

<div class="expandable-btn-wrapper">
    <button
        class="y-add-btn y-add-main"
        type="button"
        data-toggle="collapse"
        data-target="#expandableBtnOptions"
        aria-expanded="false"
        aria-controls="expandableBtnOptions">
        <span class="hyicon hyicon-add"></span>
        VALUE
    </button>
    <div class="expandable-options collapse" id="expandableBtnOptions">
        <button class="y-add-btn y-add-new">
            <span class="hyicon hyicon-add"></span>
            New
        </button>
        <div class="dropdown">
            <button
                class="y-add-btn y-add-existing"
                type="button"
                id="existingOptionsList"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="true">
                Existing
                <span class="hyicon hyicon-arrow"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="existingOptionsList">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
    </div>
</div>

14.2 Overlay layout

Use the modifier class ".expandable-btn-overlay" when you don't want the expanded options to affect the rest of the elements.

<div class="expandable-btn-wrapper expandable-btn-overlay">
    <button
        class="y-add-btn y-add-main"
        type="button"
        data-toggle="collapse"
        data-target="#expandableBtnOptions2"
        aria-expanded="false"
        aria-controls="expandableBtnOptions">
        <span class="hyicon hyicon-add"></span>
        VALUE
    </button>
    <div class="expandable-options collapse" id="expandableBtnOptions2">
        <button class="y-add-btn y-add-new">
            <span class="hyicon hyicon-add"></span>
            New
        </button>
        <div class="dropdown">
            <button
                class="y-add-btn y-add-existing"
                type="button"
                id="existingOptionsList2"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="true">
                Existing
                <span class="hyicon hyicon-arrow"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="existingOptionsList2">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
    </div>
</div>