FAB

Usage

FAB is short for Floating Action Button and it bears the exact same functionalities and properties like the App Button however differs in usage and anatomy. FABs are smaller buttons that as name suggest can be floating, appearing/disappearing or be reused as part of some other components. Mostly FABs are used in mobile experiences. FABs usually bear lesser weight than the App Button and hence smaller geometry.

Unlike App Buttons that can only manipulate data and help user make an action to the data; FABs can be used as links that navigate to other pages as well. A good example is Pagination component where FAB is used to navigate to next/previous pages.

Types

Currently there is only single type of FAB component.

Anatomy and Behavior

1. Container - has a fixed size and is a clickable area for FAB component.

2. Icons - is the main way to communicate the function and purpose of the FAB, therefore icons should be very explicit and widely used. FAB can contain one icon at a time.

3. Tooltip - since FABs do not have label text and rely on icons to communicate their purpose it is advised to use Tooltips to help users with various background to understand the purpose.

States

FAB can have the states of hover, active, focus, and Disabled.

Gaps and Sizes

- Height: XL
- Width: XL
- Padding up and down: S
- Padding left and right: S
- Border radius: 2XS
- Icon size: S

Tokens

SCSS Variable

Value

$fab-bgColor

--bds-brand-primary-color

$fab-color

--color-grey-98

$fab-bgColor--locked

--bds-brand-bgColor--locked

$fab-cornerRadius

--gutter-2xs

$fab-padding-vertical

--gutter-xl

$fab-padding-horizontal

--gutter-xl

$fab-vertical

--gutter-xl

$fab-horizontal

--gutter-xl

Properties

export interface FABProps extends ElementProps, TooltipProps {
    icon: IconName;
    isLoading?: boolean;
    disabled?: boolean;
    to?: string;
    ArrowDirection: ArrowDirection;
}

Configurations

FAB
Sizes	Left	Right	Down	Disabled
	small
medium
big