Split Button

Accessibility

• Two real buttons in a labelled group. The chevron has aria-haspopup menu, aria-expanded and its own name from menuLabel.
• The menu is Dropdown Menu's: role menu, items with role menuitem, and type ahead.
• Link items are real links, so they open in a new tab and can be copied. A new tab link gets rel noopener noreferrer.
• On Mobile each segment has a hit area of at least 44 px.

Motion

• The whole control presses as one shape, scaling to 0.98, so the join never opens. The label draws on hover and waves on press.
• The chevron turns 180 degrees while the menu is open.
• The menu scales from 0.96 and fades in over 160 ms from the corner under the chevron.
• Loading shows a spinner and success a tick with a past tense label for 1.6 s, as on Button.
• With reduced motion or animated false, the menu fades without scaling and nothing else moves.

Responsive behavior

• Heights step up 8 px on Mobile through the size tokens. The chevron segment stays square.
• On Mobile the menu spans the screen width, as Dropdown Menu does.

Performance

• Two Buttons and one Dropdown Menu, so it adds one boolean of state: whether the menu is open.
• The menu mounts only while open. Its rows and their label motion are not in the page until then.
• Press and menu motion use transform and opacity, so they never run layout.

• Import from @/components/fetaui/split-button after installing it. It installs Button and Dropdown Menu with it.
• label and entries are required. entries is Dropdown Menu's MenuEntry[]: actions with icon, description, trailingIcon or href, labels and separators.
• Give an entry href and target '_blank' to make it a real link. rel defaults to noopener noreferrer.
• Pass status and onSuccessEnd for async work on the main action, and reset status to idle in onSuccessEnd.
• menuLabel names the chevron for screen readers. Say what the menu holds, like More send options.