@gemeente-denhaag/floating-contact v0.1.1-alpha.169
Floating Contact
The floating contact button is to provide the user several contact options at all time.
When to use
The floating contact button should be visible at all times.
Alternatives and related components
The floating contact button is related to the contact page.
Anatomy
The floating contact button consist of:
An action button: that gives information about the action:
- With contact icons;
- With a label;
Panel: to dispay all the options:
- With a title;
- A contact option;
- with an icon: that communicates the contact style:
- a label;
- an indicator bubble: to indicate if the chat is online or offline;
- a call to action if there is one.
- with an icon: that communicates the contact style:
(Interactive) states
The contact floating button consists of 2 states
- Default: closed
- On trigger: opened
Design properties
Typography
The button: Sans/md/700
The panel:
- Title: TheMix/2xl/700
- Caption: Sans/lg/700
- Link: Sans/md/400
Colors
The button
- Fill: green/3
- Line: green/2
- Fill background: green/1
- Icons: white
- Text button: green/5
The panel
- Background: green/3
- Title and caption: green/1
- Link: white
Structure
The button:
- 16 px padding
- Spacing between icons: 12px
The panel
- Padding top-bottom: 32px
- Padding left-right: 24px
- Spacing between: 24px
Accessibility
Make sure the floating contact button is accessible by tab. Also the several options within the floating contact button should be reachable.
Best practices
Use the floating contact button on every page, so the user always has the possibility to reach out.
10 days ago
17 days ago
17 days ago
23 days ago
30 days ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
7 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
8 months ago
8 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago