🚧 Under Construction

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

Primary Split Button

View in Pattern Lab

HTML Markup

<div class="hoo-buttonsplit-primary">
    <button class="hoo-buttonsplit-standard"  ><span class="hoo-button-label">Standard</span>
</button>
<button class="hoo-buttonsplit-carret"  ><span class="hoo-button-label"><span class="hoo-icon">
    <svg class="hoo-icon-svg icon-arrow-down" aria-hidden="true">
        <title>Fluent UI / Fluent Design by hTWOo UI Framework</title>
        <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>

Primary Split Button

The Primary Split Button combines a primary action button with a dropdown menu trigger, allowing users to access the main action directly or choose from related actions via the dropdown.

Overview

Split buttons provide dual functionality - immediate access to a primary action while offering additional related options through a dropdown menu. The primary button side triggers the main action, while the dropdown arrow reveals secondary actions.

Features

  • Primary Action: Left button for immediate main action
  • Secondary Actions: Dropdown menu with related options
  • Visual Hierarchy: Primary styling indicates main action importance
  • Keyboard Accessible: Full keyboard navigation support
  • ARIA Compliant: Proper accessibility attributes

JavaScript Integration

Split buttons require JavaScript for dropdown functionality:

Automatic Initialization

Manual Initialization

Key JavaScript Features

  • Flyout Toggle: Show/hide dropdown menu
  • ARIA States: Manages aria-pressed and aria-expanded attributes
  • Focus Management: Proper focus handling for accessibility
  • Event Handling: Click and keyboard interaction support

SCSS Imports