🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Icon Button Split

View in Pattern Lab

HTML 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