🚧 Under Construction
This component documentation is currently being developed. Some features may be incomplete.
Icon Button Split
View in Pattern LabHTML Markup
<div class="hoo-buttonicon-split" aria-haspopup="true">
<button class="hoo-buttonicon-split" aria-haspopup="true" ><span class="hoo-button-icon" aria-hidden="true"><span class="hoo-icon">
<svg class="hoo-icon-svg icon-plus" aria-hidden="true">
<use xlink:href="/htwoo-core/images/icons.svg#icon-plus">
</use>
</svg></span></span>
</button>
<button class="hoo-buttonicon-split hoo-buttonicon-flyout" aria-haspopup="true"><span class="hoo-button-icon hoo-buttonchevron"><span class="hoo-icon">
<svg class="hoo-icon-svg icon-arrow-down" aria-hidden="true">
<use xlink:href="/htwoo-core/images/icons.svg#icon-arrow-down">
</use>
</svg></span></span>
</button>
<menu class="hoo-buttonflyout">
<li class="hoo-buttonflyout-item">
<button class="hoo-buttonaction"><span class="hoo-button-icon" aria-hidden="true"><span class="hoo-icon">
<svg class="hoo-icon-svg icon-ninjacat" aria-hidden="true">
<use xlink:href="/htwoo-core/images/icons.svg#icon-ninjacat">
</use>
</svg></span></span><span class="hoo-button-label">Email message</span>
</button>
</li>
<li class="hoo-buttonflyout-item">
<button class="hoo-buttonaction"><span class="hoo-button-icon" aria-hidden="true"><span class="hoo-icon">
<svg class="hoo-icon-svg icon-minus" aria-hidden="true">
<use xlink:href="/htwoo-core/images/icons.svg#icon-minus">
</use>
</svg></span></span><span class="hoo-button-label">Calendar Event</span>
</button>
</li>
</menu>
</div>
SCSS Imports
Main Component
@n8d/htwoo-core/components/buttons