🚧 Under Construction

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

Command Button

HTML Markup

<div class="hoo-buttoncmd"  aria-haspopup="true"  >
    <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>

Command buttons provide a specialized style for application commands, often used in toolbars and command bars. When no dropdown items are specified, the button renders without a chevron down and without any flyout menu.

Supported States:

Default - Normal button state
Hover - Mouse over state
Active - Pressed state
Focus - Focused through keyboard navigation
Disabled - Non-interactive state

SCSS Imports

Main Component
@n8d/htwoo-core/components/buttons

SCSS Partial Location
/src/styles/01-atoms/buttons/_buttons.scss

CSS Classes

Base Classes

.hoo-button - Base button styling (used for Command buttons)
.hoo-cmd - Specific modifier for command buttons

States

:hover - Hover state
:active - Active/pressed state
:focus - Focus state
:disabled - Disabled state
[aria-disabled="true"] - ARIA disabled state

Usage Examples

Basic Command Button

<button class="hoo-button hoo-cmd">
  <i class="hoo-icon" aria-hidden="true">icon_name</i>
  <span class="hoo-button-label">Command Action</span>
</button>

Command Button with Icon Only

<button class="hoo-button hoo-cmd" title="Command Action">
  <i class="hoo-icon" aria-hidden="true">icon_name</i>
  <span class="sr-only">Command Action</span>
</button>

Accessibility

Command buttons, especially icon-only variants, should include text alternatives like tooltips (title attribute) and visually hidden text (.sr-only) for screen readers.