component · mobile-first action

TuxFAB

Floating Action Button. Material-pattern primary action anchored to the bottom-right of the viewport (or a positioned ancestor). Use sparingly — exactly one FAB per screen, for the single "create new" / "compose" action.

Respects env(safe-area-inset-*) so it stays clear of the iOS home indicator and Android gesture nav. Three sizes (sm / md), and an extended pill form for label clarity.

basic

Icon-only circle

The default 56px circular form is Material's standard FAB. Requires aria-label for screen readers since there's no visible text. Clicked: 0 times. 

<tux-fab icon="lucide:plus" aria-label="New project" @click="onCreate" />

extended · with label

Pill form

Use the extended form when the action's intent isn't obvious from the icon alone. The pill expands to fit the label; height stays 48px. 

<tux-fab icon="lucide:plus" extended @click="onCreate">
  New project
</tux-fab>

side + size

Left-anchored small variant

Override side="left" for right-to-left layouts or when the bottom-right is occupied (e.g., by a TuxTabBar). Use size="sm" (40px) for compact surfaces. 

<tux-fab icon="lucide:message-square" size="sm" side="left" aria-label="Chat" />