Get StartedFoundationsComponentsPatternsIntegration
01.Get Started
02.Foundations
03.Components
04.Patterns
05.Integration
Overview
Accordion
Badge
Breadcrumb
Button
Gradient Button
FAB
Icon Button
Card
Checkbox
Chips
Date Picker
Dialogs
Divider
List
Loading
Menu
Options
Pagination
Radio
Scrollbar
Search
Selector
Skeleton
Slider
Swiper
Switch
Tabs
Text Field
TextArea
Toast
Tooltip

FAB

PreviousGradient Button
Icon ButtonNext
ELFBAR Design

V 0.1.0

A design system built for BMD teams.

Brand Marketing Department

Resources

  • GitHub
  • Storybook
  • Figma

Documentation

  • Changelog
  • Components
  • Tokens
  • Global market globe

Brands

  • ELFBAR Official
  • LostMary Official

Copyright © 2026 ELFBAR. All rights reserved.

When to Use

Example: community home feed + compose FAB

Community
  • The page has one highest-priority action that should always be reachable
  • The action affects the entire page (not a single list item)
  • You need strong visual contrast against the content to guide users

When NOT to Use

  • The action isn't the most important on the page — use a regular Button instead
  • Multiple actions share equal priority — FAB expresses only one primary action
  • The action is destructive (delete / clear) — avoid using FAB

Usage Guidelines

DO

Use FAB for the single most important action on the page. Place at the bottom-right corner of the viewport

Don’t

Don't use FAB when the action isn't the most important on the page — use a regular Button instead

DO

Use options for speed dial when multiple related actions share the same trigger

Don’t

Don't use FAB for destructive actions (delete / clear). Don't use multiple FABs on the same page

DO

When options are provided, the FAB becomes a speed dial — clicking it toggles an action list above the button

Don’t

Don't use multiple FABs on the same page

Accessibility

  • Always provide aria-label — the FAB contains no visible text
  • When options are provided, the button gets aria-expanded and aria-haspopup="menu" automatically
  • Option buttons include role group semantics via their container
  • All interactive states are keyboard-navigable with focus-visible rings