@n8d/htwoo-patterns/_patterns/atoms/buttons/button-split-primary.md

hTWOo Patterns to setup custom style guide

---
title: Primary Split Button
order: 20
---

# 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

***