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>