Floating Action Button (FAB)

A FAB (Floating Action Button) represents the primary action on a screen. It appears in front of all screen content and is recognizable for its circular shape and icon in the center.

FAB Variants

FAB Sizes

FAB Disabled

FAB Positions

These FABs demonstrate positioning. In a real application, they would be fixed to the viewport.

Animated FAB

This FAB demonstrates the entrance animation

FAB Interaction

Demonstrates interactive behaviors of the FAB.

mtrl is a lightweight, composable TypeScript/JavaScript component library inspired by Material Design principles. Built with zero dependencies, MTRL provides a robust foundation for creating modern web interfaces with an emphasis on performance, type safety, and accessibility.

npmGitHubX