🚧 Under Construction

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

All Buttons - disabled

View in Pattern Lab

HTML Markup

<p>
    <button class="hoo-button" disabled><span class="hoo-button-label">Button</span>
</button>
</p>
<p>
    <button class="hoo-button" disabled><span class="hoo-icon">
        <svg class="hoo-icon-svg icon-arrow-left" aria-hidden="true">
            <use xlink:href="/htwoo-core/images/icons.svg#icon-arrow-left">
            </use>
        </svg></span><span class="hoo-button-label">Button</span>
</button>
</p>
<p>
    <button class="hoo-button is-reversed" disabled><span class="hoo-icon">
        <svg class="hoo-icon-svg icon-arrow-left" aria-hidden="true">
            <use xlink:href="/htwoo-core/images/icons.svg#icon-arrow-left">
            </use>
        </svg></span><span class="hoo-button-label">Button</span>
</button>
</p>
<p>
    <button class="hoo-button-primary" disabled><span class="hoo-button-label">Button</span>
</button>
</p>
<p>
    <button class="hoo-button-primary" disabled><span class="hoo-icon">
        <svg class="hoo-icon-svg icon-arrow-left" aria-hidden="true">
            <use xlink:href="/htwoo-core/images/icons.svg#icon-arrow-left">
            </use>
        </svg></span><span class="hoo-button-label">Button</span>
</button>
</p>
<p>
    <button class="hoo-button-primary is-reversed" disabled><span class="hoo-icon">
        <svg class="hoo-icon-svg icon-arrow-left" aria-hidden="true">
            <use xlink:href="/htwoo-core/images/icons.svg#icon-arrow-left">
            </use>
        </svg></span><span class="hoo-button-label">Button</span>
</button>
</p>
<p>
    <button class="hoo-buttonaction" disabled><span class="hoo-button-icon" aria-hidden="true"><span class="hoo-icon">
        <svg class="hoo-icon-svg icon-arrow-left" aria-hidden="true">
            <use xlink:href="/htwoo-core/images/icons.svg#icon-arrow-left">
            </use>
        </svg></span></span><span class="hoo-button-label">Button</span>
</button>
</p>
<p>
    <button class="hoo-buttoncomp-primary" disabled><span class="hoo-buttoncomp-label">Button</span><span class="hoo-buttoncomp-desc">Primary with description</span>
</button>
</p>
<p>
    <button class="hoo-buttoncomp" disabled><span class="hoo-buttoncomp-label">Button</span><span class="hoo-buttoncomp-desc">Primary with description</div>
</button>
</p>
<p>
    <div class="hoo-buttoncontext-outer">
        <button class="hoo-buttoncontext"  disabled><span class="hoo-buttoncontext-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><span class="hoo-buttoncontext-label">New Item</span><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>
</p>
<p>
    <div class="hoo-buttoncmd"  aria-haspopup="true"   disabled>
        <button class="hoo-buttoncmd" 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><span class="hoo-button-label">New Item</span><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>
</p>
<p>
    <div class="hoo-buttonicon-overflow" aria-haspopup="true">
        <button class="hoo-buttonicon-flyout" aria-haspopup="true" disabled><span class="hoo-button-icon" aria-hidden="true"><span class="hoo-icon">
            <svg class="hoo-icon-svg " aria-hidden="true">
                <title>Fluent UI / Fluent Design by hTWOo UI Framework</title>
                <use xlink:href="/htwoo-core/images/icons.svg#">
                </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>
</p>
<p>
    <div class="hoo-buttonicon-split" aria-haspopup="true">
        <button class="hoo-buttonicon-split" aria-haspopup="true"  disabled><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"  disabled 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>
</p>
<p>
    <button class="hoo-button-pivot" disabled><span class="hoo-pivot-inner" title="Fluent UI / Fluent Design by hTWOo UI Framework">Fluent UI / Fluent Design by hTWOo UI Framework</span>
</button>
</p>