# ε FAB

Element: The Floating Action Button with set sizes for display with or without a status badge.

[Styleguide Link](https://zpl.io/b65y6Wq)

* Parent: [App Bar - Bottom](https://able.bucca.com/core/components/app-bar)
* Child: [FABShape](https://able.bucca.com/core/overview/fab/fab-shape), [Badge](https://able.bucca.com/core/overview/badge)

## Properties

### Size

To account for multiple usecases the design system has established a set sizing standard for FAB's. The size and shape of the FAB is set in the base level feeder of FAB - Shape and passed to this level.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FQxU1hCDOGf3w6J7vfL12%2FSize.png?alt=media&#x26;token=60b374f7-3b6d-45f4-819b-b69844d64d0b" alt=""><figcaption></figcaption></figure>

* Tiny
* XSmall
* Small
* Medium
* Medium Extended

### Badge

Most of the time a FAB displays an icon as a metaphor for the primary action to take on the screens subject matter, but it does have the ability to carry a badge as well. For example, there may be a situation where the FAB acts as a shopping cart where the alert can serve as a cart count.

At the smaller sizes (Tiny, xSmall) of FAB the Badge only acts as a colored badge, meaning there is no numeric value or icon possible within the Badge. At the other sizes the numeric and icon badges are possible.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FCIN81cjC8GRhKINsPg11%2FBadge.png?alt=media&#x26;token=d3b9dc5f-a78d-442c-bb74-247b2190d38b" alt=""><figcaption></figcaption></figure>

### State

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FkFjwtCJqJAUmesT3EY2L%2FState.png?alt=media&#x26;token=57ef15fe-361d-461a-b697-2e3a85965b67" alt=""><figcaption></figcaption></figure>

* Enabled
* Disabled
* Hover
* Pressed
* Focus

### Style

The color of the FAB can be set to the following color display options...

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FMBHg5FJZ9grQnY5ykend%2FStyle.png?alt=media&#x26;token=203dfcf9-872d-4621-bc37-33cc6280c408" alt=""><figcaption></figcaption></figure>

* Primary (default)
* Secondary
* Light
* Neutral
* Dark