Fab
canonFloating primary action of a screen on a phone: round „+" for Create, extended with a label otherwise.
Approved by the owner 2026-09-28 (Attio pattern, AD). Drawn by SectionTopBar from primaryAction data below 720 px only; acrm !4088. Used only through SectionTopBar (primaryAction below 720 px) — gen-usage shows 0 direct uses; that is expected, not unused.
Used in no file in the app (main)
Default
export const Default = () => <Fab inline icon="plus" label="Nový kontakt" onClick={noop} />;Variants
round, 56 px — only for Create (kind: 'create'); the label is the accessible name
extended, 48 px — any other primary: icon + visible label
extended — a longer label
export const Variants = () => (
<div style={grid}>
<Labeled label="round, 56 px — only for Create (kind: 'create'); the label is the accessible name">
<Fab inline icon="plus" label="Nový kontakt" onClick={noop} />
</Labeled>
<Labeled label="extended, 48 px — any other primary: icon + visible label">
<Fab inline extended icon="calendar-week" label="Rezervovat" onClick={noop} />
</Labeled>
<Labeled label="extended — a longer label">
<Fab inline extended icon="send" label="Poslat e-mailem" onClick={noop} />
</Labeled>
</div>
);States
disabled (also while the primary is loading)
export const States = () => (
<div style={grid}>
<Labeled label="disabled (also while the primary is loading)">
<div style={row}>
<Fab inline disabled icon="plus" label="Nový kontakt" onClick={noop} />
<Fab inline extended disabled icon="receipt" label="Zaúčtovat" onClick={noop} />
</div>
</Labeled>
</div>
);Composition
export const Composition = () => (
<div
style={{
position: 'relative',
width: 390,
height: 320,
border: '1px solid var(--border)',
borderRadius: 'var(--radius-lg)',
background: 'var(--bg-canvas)',
overflow: 'hidden',
}}
>
<div style={{ display: 'grid' }}>
{['Michal Martoch', 'Ludmila Nikitina', 'Miloslav Klimek', 'Adina Sixtová'].map((n) => (
<div
key={n}
style={{
padding: 'var(--sp-3) var(--sp-4)',
borderBottom: '1px solid var(--border)',
color: 'var(--fg)',
}}
>
{n}
</div>
))}
</div>
<div style={{ position: 'absolute', right: 'var(--sp-5)', bottom: 'var(--sp-5)' }}>
<Fab inline icon="plus" label="Nový kontakt" onClick={noop} />
</div>
</div>
);