Fab

Floating action button — the screen's single primary action, drawn as a raised accent circle. Use at most one per view. .fab-extended turns it into a pill with icon + visible text; .fab-fixed pins it to the bottom-right corner above the page content. Equivalent of Material's FloatingActionButton, styled Lozenge.

Root: .fab on <button>

Examples

Example 1

<button class="fab" aria-label="Create issue">+</button>

Example 2

<button class="fab fab-small" aria-label="Add comment">+</button>

Example 3

<button class="fab fab-extended">+ Create</button>

Example 4

<button class="fab fab-fixed" aria-label="Create issue">+</button>

Contract

Variants & modifiers

Class	Axis	Rules
`fab-small`	size	optional · exclusive
`fab-small`	modifier	optional
`fab-extended`	modifier	optional
`fab-fixed`	modifier	optional

Accessibility

On	Attribute	Level	When
`.fab`	`aria-label`	required	the FAB is icon-only — i.e. not .fab-extended with visible label text. An icon glyph alone is not an accessible name.

Icon-only FABs (default and .fab-small) must carry aria-label naming the action (e.g. aria-label="Create issue"); .fab-extended with visible text needs none. Always a <button> — never a styled <a> — so Space/Enter activation and disabled semantics come free. .fab-fixed sits above scrolling content; keep it out of the way of page-end content by padding the container bottom.

Nesting

Allowed in:

page root / main content (typically as .fab-fixed)
cards
board views
toolbars

Never inside (or containing):

.fab
.btn
.btn-group