Axismundi v3.5.5 · Wave 1

FAB family full-spec module

Baseline classes stay authoritative. This lab page catalogs the static FAB and Extended FAB primitives with icon-system-forward specimens, native button semantics, and no ripple/runtime wiring.

Experimental lab preview — source authority remains components.css §15, components.css §16, and the FAB audit trio. icon-system/ is CURRENT unconditional; ripple/ remains CANDIDATE and is not wired.

Inline catalog specimens only. Production floating/fixed placement is integration-owned by theme templates, patterns, block editor, or plugin code.

인라인 카탈로그 specimen만 제공한다. 실제 floating/fixed placement는 theme template, pattern, block editor, plugin 레벨의 통합 책임이다.

§2. FAB sizes

Current baseline sizes are 56 / 80 / 96. This page does not invent a 40px FAB rule.

Default · 56px

Medium · 80px

Large · 96px

§3. Surface variants

Six baseline color styles. Hover demonstrates the baseline elevation transition from level3 to level4; no alternate elevation variant is created.

Tonal primary

Tonal secondary

Tonal tertiary

Primary

Secondary

Tertiary

Hover to inspect the baseline level3 → level4 elevation transition.

§4. Extended FAB static

Static catalog specimen — no runtime action or transition is wired here. Production usage wires behavior at the integrator level (theme JS / block editor / plugin).

정적 카탈로그 specimen — 여기에는 런타임 액션이나 전환 동작이 배선되어 있지 않다. 실제 사용 시 theme JS / block editor / plugin 레벨에서 동작을 배선한다.

Icon + visible label

아이콘 + visible label

§5. Disabled — native

Native disabled blocks activation by platform behavior.

§5a. Disabled — aria-disabled plugin-managed

aria-disabled only communicates state; integrator code must block activation.

aria-disabled는 상태만 전달한다. 실제 activation 차단은 integrator 코드가 담당해야 한다.

§6. State-layer / ripple boundary

Static state-layer foundation is CURRENT. Animated ripple remains CANDIDATE; this page intentionally has no ripple data attribute, Material Web ripple element, or lab ripple script wiring.

With has-state-layer / without opt-in class.

§7. Code snippets

<button class="ax-fab has-state-layer" type="button" aria-label="Create">
  <span class="material-symbols-rounded notranslate ax-icon ax-fab-icon"
        translate="no" aria-hidden="true" draggable="false">add</span>
</button>

<button class="ax-fab-extended has-state-layer" type="button">
  <span class="material-symbols-rounded notranslate ax-fab-extended__icon"
        translate="no" aria-hidden="true" draggable="false">edit</span>
  <span class="ax-fab-extended__label">Compose</span>
</button>

<button class="ax-fab has-state-layer" type="button"
        aria-label="Unavailable create" aria-disabled="true">
  ...
</button>

§8. Cross-references