Split button
canonMain action plus a chevron that opens a menu of related variants of the same action.
Approved by the owner 26 Sep 2026 („za me ok . schvaleno“, preview button-compact-split) and delivered in acrm !3903. Reverses review ACRM-81 (no use case then) on the owner’s request; pattern Atlassian Split button. Menu items shared with Menu button (one menu in the family). First adopter: mail „Odeslat hned / s odkladem“. Registry repaired 17 Oct 2026 (review F4/F11): attached css button.css.
Used in 4 files · 3 areas · 5× — components/mail, components/setkani, pages/komunikace
Default
export const Default = () => (
<SplitButton onClick={noop} items={send} moreLabel={more}>
Odeslat
</SplitButton>
);Variants
default
primary — at most once per container
mode choice — chevron picks (radio), main button performs
export const Variants = () => (
<div style={row}>
<Labeled label="default">
<SplitButton onClick={noop} items={send} moreLabel={more}>
Odeslat
</SplitButton>
</Labeled>
<Labeled label="primary — at most once per container">
<SplitButton variant="primary" onClick={noop} items={send} moreLabel={more}>
Odeslat
</SplitButton>
</Labeled>
<Labeled label="mode choice — chevron picks (radio), main button performs">
<ModeSplit variant="primary" />
</Labeled>
</div>
);Sizes
default · default
default · compact
primary · default
primary · compact
export const Sizes = () => (
<div style={grid}>
{(['default', 'primary'] as const).map((v) => (
<div key={v} style={row}>
<Labeled label={`${v} · default`}>
<SplitButton variant={v} onClick={noop} items={send} moreLabel={more}>
Odeslat
</SplitButton>
</Labeled>
<Labeled label={`${v} · compact`}>
<SplitButton variant={v} compact onClick={noop} items={send} moreLabel={more}>
Odeslat
</SplitButton>
</Labeled>
</div>
))}
</div>
);States
disabled
primary · disabled
menu — click the chevron
loading
mode choice · main disabled, chevron live
export const States = () => (
<div style={row}>
<Labeled label="disabled">
<SplitButton disabled onClick={noop} items={send} moreLabel={more}>
Odeslat
</SplitButton>
</Labeled>
<Labeled label="primary · disabled">
<SplitButton variant="primary" disabled onClick={noop} items={send} moreLabel={more}>
Odeslat
</SplitButton>
</Labeled>
<Labeled label="menu — click the chevron">
<SplitButton onClick={noop} items={send} moreLabel={more}>
Odeslat
</SplitButton>
</Labeled>
<Labeled label="loading">
<SplitButton variant="primary" loading onClick={noop} items={send} moreLabel={more}>
Odeslat
</SplitButton>
</Labeled>
<Labeled label="mode choice · main disabled, chevron live">
<ModeSplit variant="primary" disabled />
</Labeled>
</div>
);Composition
dialog footer — split primary, secondary to its left
| Firma | Město | Obchody | Objem | Vlastník | ||
|---|---|---|---|---|---|---|
| Brno Tech a.s. | Brno | 3 | 1 250 000 | Štěpán Svoboda | ||
| Atol Capital s.r.o. | Praha | 1 | 480 000 | Petr Smutný | ||
| Modřice Invest | Modřice | 5 | 2 100 000 | Eva Dvořáková |
export const Composition = () => (
<div style={grid}>
<Labeled label="dialog footer — split primary, secondary to its left">
<div
style={{
display: 'flex',
gap: 'var(--sp-3)',
justifyContent: 'flex-end',
padding: 'var(--sp-4)',
borderTop: '1px solid var(--border)',
minWidth: 420,
}}
>
<Button>Zrušit</Button>
<SplitButton variant="primary" onClick={noop} items={send} moreLabel={more}>
Odeslat
</SplitButton>
</div>
</Labeled>
<Labeled label="segment table — compact split in the row">
<Table
action={(r) => (
<SplitButton
compact
onClick={noop}
moreLabel={`Další akce pro ${r.name}`}
items={[
{ key: 'deal', label: 'Nový obchod', icon: 'plus', onClick: noop },
{ key: 'task', label: 'Nový úkol', icon: 'circle-check', onClick: noop },
]}
>
Otevřít
</SplitButton>
)}
/>
</Labeled>
</div>
);