Skip to main content

Floating Action Button Component

This document outlines the specifications for the FloatingActionButtonComponent, an Angular component designed to provide a floating action button (FAB) for triggering primary or high-priority actions within an application.

Purpose​

The FloatingActionButtonComponent serves as a prominent and easily accessible button for triggering primary or high-priority actions within an application. It enhances user experience by providing a visually distinct and consistent interface element for initiating common actions.

Usage​

Integrate the FloatingActionButtonComponent into your Angular applications to enable users to perform primary actions quickly and conveniently.

Inputs​

  1. icon: (Required) The icon to be displayed within the floating action button. Accepts CSS classes or SVG icons.

  2. tooltip: (Optional) Displays a tooltip with additional information when the floating action button is hovered over.

  3. position: (Optional) Specifies the position of the floating action button relative to the viewport. Possible values:

    • 'top-left'
    • 'top-right'
    • 'bottom-left'
    • 'bottom-right'

  4. color: (Optional) Specifies the color scheme of the floating action button. Possible values:

    • 'primary'
    • 'secondary'
    • 'success'
    • 'warning'
    • 'danger'
    • 'info'

  5. disabled: (Optional) Disables the floating action button if set to true.

  6. size: (Optional) Specifies the size of the floating action button. Possible values:

    • 'small'
    • 'medium'
    • 'large'

Events​

  1. click: Fired when the floating action button is clicked.

Example​

<app-fab
  icon="add"
  tooltip="Add Item"
  position="bottom-right"
  color="primary"
  size="medium"
  [disabled]="false"
  (click)="onFabClick()"
></app-fab>

Notes​

  • Customize the styling of the floating action button to match the overall design language and branding of your application.
  • Utilize the tooltip input to provide users with additional context or information about the action triggered by the floating action button.
  • Implement the click event handler to respond to user interactions with the floating action button.
// Example click event handler for floating action button
onFabClick() {
  // Perform action triggered by the floating action button
}