⌘ K
  • Design Principles
  • Design Framework
  • UX Laws
  • Colours
  • Typography
  • Layout Grids
  • Spacing & Radius
  • Shadow & Blur
Product Design Process
Accessibility Guideline
Content Voice
Marketing & Collaterals
  • Accordion
  • App Bar
  • Avatar
  • Badge
  • Button
  • Breadcrumb
  • Bottom Navigation
  • Carousel
  • Cards
  • Checkbox
  • Chip
  • Date Picker
  • Dropdown
  • Dialog
  • Divider
  • Floating Action Button
  • Footer
  • Header
  • Link
  • Loader
  • Menu
  • Pagination
  • Popover
  • Progress Bar
  • Radio Button
  • Search
  • Sidebar
  • Slider
  • Skeleton
  • Statistic
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag
  • Text Field
  • Timeline
  • Toast Message
  • Tooltip
  • Upload
  • Logos
  • System Icons
  • Visual Icons
  • Illustrations
  • Images
  • Tones
Templates
v 1.0
  • About Helix
  • For Designers
  • For Developers
  • Components
Floating Action Button

Floating Action Button

A floating action button is a button that triggers the primary action in your interface UI.

Usage

  • Executes the primary action on a screen.
  • Mainly used for frequent action.

Anatomy

The floating action button is encapsulated within a container and may contain an icon representing the action, alongside a text label providing additional information.

Avatar Anatomy

Variant

Floating Action Button have extended (With Icon), extended (Without Icon) & default variants.

Extended (With Icon)

Extended (Without Icon)

Default

Sizes

Float action button are available in medium, and small sizes.

Medium

Small

States

Float action button have default & close states.

Default

Close

Specifications

Structure and spacing measurements for floating action button.

Avatar Specifications

Live Demo

The Floating Action Button is demonstrated in a live environment in this demo.

Storybook

Gain access to the component library by clicking here. (For developers)

Divider
Footer

Helix - HDFC Life 2025