Floaters can perform the primary, or most common, action on a screen.
The floater button appears in front of all screen content, overlaying everything. It is commonly placed on the very bottom of the screen, aligned either to the right or in the centre.
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Floater |
Whenever there is a primary action that needs to be highlighted for the user. |
On the very bottom of the screen. It is always overlaying everything else. |
The user can click on the floater - if not disabled. |
Anatomy
Structure
|
|
|
container |
--- |
|
label |
The label should be a call to action. Ence, it should be concise and direct the user to take one single specific action, e.g. "Login", "Add to cart", or "Complete order". |
|
icon |
--- |
Properties
|
Property |
Value |
Description |
|---|---|---|
|
Type |
primary secondary |
The values primary and secondary are relative to the theme colours. |
|
State |
default hover pressed disabled |
--- |
|
Label |
true false |
When false, the label won't show. |
Guidelines
Use Extended floaters for primary/ critical actions for the product
|
Don't use Regular floaters if the icon can be misleading. |