Skip to main content

Floating Action Button

Proper layout and spacing are crucial for a visually appealing and functional interface.

Anatomy​

  • 1. Floating Action Button
  • 2. Icon
Anatomy

Properties​

IsActive: false

IsActive false

IsActive: true

IsActive true

States​

isActive: false

IsActive false states

isActive: true

IsActive true states

Layout & spacing​

Icon

  • Size: 32 x 32px
  • Horizontal resizing: fixed
  • Vertical resizing: fixed
Icon Layout

Floating Action Button

  • Padding: 12px 12px
  • Horizontal resizing: auto
  • Vertical resizing: auto
Button Layout

Alignment & placement​

  • Bottom: 16px
  • Right: 16px
  • Position: absolute, fixed
  • Z-index: 1
Button Layout