0.1.1-alpha.202 • Published 9 months ago

@gemeente-denhaag/floating-contact v0.1.1-alpha.202

Weekly downloads
-
License
EUPL-1.2
Repository
github
Last release
9 months ago

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:

  1. An action button: that gives information about the action:

    • With contact icons;
    • With a label;

  2. 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.

(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.

@infinitebrahmanuniverse/nolb-_gem@everything-registry/sub-chunk-355@gemeente-denhaag/storybook
0.1.1-alpha.202

9 months ago

0.1.1-alpha.201

9 months ago

0.1.1-alpha.200

9 months ago

0.1.1-alpha.199

9 months ago

0.1.1-alpha.198

9 months ago

0.1.1-alpha.197

9 months ago

0.1.1-alpha.196

9 months ago

0.1.1-alpha.195

9 months ago

0.1.1-alpha.194

9 months ago

0.1.1-alpha.193

9 months ago

0.1.1-alpha.192

9 months ago

0.1.1-alpha.191

10 months ago

0.1.1-alpha.190

11 months ago

0.1.1-alpha.189

11 months ago

0.1.1-alpha.188

11 months ago

0.1.1-alpha.187

11 months ago

0.1.1-alpha.186

11 months ago

0.1.1-alpha.185

11 months ago

0.1.1-alpha.184

11 months ago

0.1.1-alpha.183

11 months ago

0.1.1-alpha.182

12 months ago

0.1.1-alpha.181

1 year ago

0.1.1-alpha.180

1 year ago

0.1.1-alpha.174

1 year ago

0.1.1-alpha.173

1 year ago

0.1.1-alpha.172

1 year ago

0.1.1-alpha.179

1 year ago

0.1.1-alpha.178

1 year ago

0.1.1-alpha.177

1 year ago

0.1.1-alpha.176

1 year ago

0.1.1-alpha.175

1 year ago

0.1.1-alpha.171

1 year ago

0.1.1-alpha.170

1 year ago

0.1.1-alpha.169

1 year ago

0.1.1-alpha.168

1 year ago

0.1.1-alpha.167

1 year ago

0.1.1-alpha.166

1 year ago

0.1.1-alpha.165

1 year ago

0.1.1-alpha.164

1 year ago

0.1.1-alpha.163

1 year ago

0.1.1-alpha.162

1 year ago

0.1.1-alpha.161

1 year ago

0.1.1-alpha.160

1 year ago

0.1.1-alpha.159

1 year ago

0.1.1-alpha.158

1 year ago

0.1.1-alpha.157

1 year ago

0.1.1-alpha.156

1 year ago

0.1.1-alpha.155

1 year ago

0.1.1-alpha.154

1 year ago

0.1.1-alpha.153

1 year ago

0.1.1-alpha.152

1 year ago

0.1.1-alpha.151

1 year ago

0.1.1-alpha.150

1 year ago

0.1.1-alpha.149

1 year ago

0.1.1-alpha.148

2 years ago

0.1.1-alpha.147

2 years ago

0.1.1-alpha.146

2 years ago

0.1.1-alpha.145

2 years ago

0.1.1-alpha.144

2 years ago

0.1.1-alpha.143

2 years ago

0.1.1-alpha.142

2 years ago

0.1.1-alpha.141

2 years ago

0.1.1-alpha.140

2 years ago

0.1.1-alpha.127

2 years ago

0.1.1-alpha.126

2 years ago

0.1.1-alpha.125

2 years ago

0.1.1-alpha.124

2 years ago

0.1.1-alpha.123

2 years ago

0.1.1-alpha.122

2 years ago

0.1.1-alpha.121

2 years ago

0.1.1-alpha.120

2 years ago

0.1.1-alpha.129

2 years ago

0.1.1-alpha.128

2 years ago

0.1.1-alpha.130

2 years ago

0.1.1-alpha.138

2 years ago

0.1.1-alpha.137

2 years ago

0.1.1-alpha.136

2 years ago

0.1.1-alpha.135

2 years ago

0.1.1-alpha.134

2 years ago

0.1.1-alpha.133

2 years ago

0.1.1-alpha.132

2 years ago

0.1.1-alpha.131

2 years ago

0.1.1-alpha.139

2 years ago

0.1.1-alpha.105

2 years ago

0.1.1-alpha.104

2 years ago

0.1.1-alpha.103

2 years ago

0.1.1-alpha.102

2 years ago

0.1.1-alpha.101

2 years ago

0.1.1-alpha.100

2 years ago

0.1.1-alpha.99

2 years ago

0.1.1-alpha.109

2 years ago

0.1.1-alpha.108

2 years ago

0.1.1-alpha.107

2 years ago

0.1.1-alpha.106

2 years ago

0.1.1-alpha.116

2 years ago

0.1.1-alpha.115

2 years ago

0.1.1-alpha.114

2 years ago

0.1.1-alpha.113

2 years ago

0.1.1-alpha.112

2 years ago

0.1.1-alpha.111

2 years ago

0.1.1-alpha.110

2 years ago

0.1.1-alpha.119

2 years ago

0.1.1-alpha.118

2 years ago

0.1.1-alpha.117

2 years ago

0.1.1-alpha.98

2 years ago

0.1.1-alpha.97

2 years ago

0.1.1-alpha.96

2 years ago

0.1.1-alpha.95

2 years ago

0.1.1-alpha.94

2 years ago

0.1.1-alpha.93

2 years ago

0.1.1-alpha.92

2 years ago

0.1.1-alpha.91

2 years ago

0.1.1-alpha.90

2 years ago

0.1.1-alpha.88

2 years ago

0.1.1-alpha.87

2 years ago

0.1.1-alpha.86

2 years ago

0.1.1-alpha.85

2 years ago

0.1.1-alpha.84

2 years ago

0.1.1-alpha.83

2 years ago

0.1.1-alpha.89

2 years ago

0.1.1-alpha.82

3 years ago

0.1.1-alpha.81

3 years ago

0.1.1-alpha.80

3 years ago

0.1.1-alpha.77

3 years ago

0.1.1-alpha.76

3 years ago

0.1.1-alpha.75

3 years ago

0.1.1-alpha.74

3 years ago

0.1.1-alpha.79

3 years ago

0.1.1-alpha.78

3 years ago

0.1.1-alpha.73

3 years ago

0.1.1-alpha.72

3 years ago

0.1.1-alpha.71

3 years ago

0.1.1-alpha.70

3 years ago

0.1.1-alpha.69

3 years ago

0.1.1-alpha.68

3 years ago

0.1.1-alpha.67

3 years ago

0.1.1-alpha.55

3 years ago

0.1.1-alpha.54

3 years ago

0.1.1-alpha.52

3 years ago

0.1.1-alpha.51

3 years ago

0.1.1-alpha.50

3 years ago

0.1.1-alpha.59

3 years ago

0.1.1-alpha.58

3 years ago

0.1.1-alpha.57

3 years ago

0.1.1-alpha.56

3 years ago

0.1.1-alpha.44

3 years ago

0.1.1-alpha.43

3 years ago

0.1.1-alpha.42

3 years ago

0.1.1-alpha.41

3 years ago

0.1.1-alpha.40

3 years ago

0.1.1-alpha.49

3 years ago

0.1.1-alpha.48

3 years ago

0.1.1-alpha.47

3 years ago

0.1.1-alpha.46

3 years ago

0.1.1-alpha.45

3 years ago

0.1.1-alpha.39

3 years ago

0.1.1-alpha.38

3 years ago

0.1.1-alpha.66

3 years ago

0.1.1-alpha.65

3 years ago

0.1.1-alpha.64

3 years ago

0.1.1-alpha.63

3 years ago

0.1.1-alpha.62

3 years ago

0.1.1-alpha.61

3 years ago

0.1.1-alpha.60

3 years ago

0.1.1-alpha.37

3 years ago

0.1.1-alpha.36

3 years ago

0.1.1-alpha.35

3 years ago

0.1.1-alpha.34

3 years ago

0.1.1-alpha.33

3 years ago

0.1.1-alpha.32

3 years ago

0.1.1-alpha.31

3 years ago

0.1.1-alpha.30

3 years ago

0.1.1-alpha.29

3 years ago

0.1.1-alpha.28

3 years ago

0.1.1-alpha.27

3 years ago

0.1.1-alpha.26

3 years ago

0.1.1-alpha.25

3 years ago

0.1.1-alpha.24

3 years ago

0.1.1-alpha.23

3 years ago

0.1.1-alpha.22

3 years ago

0.1.1-alpha.21

3 years ago

0.1.1-alpha.20

3 years ago

0.1.1-alpha.19

3 years ago

0.1.1-alpha.18

3 years ago

0.1.1-alpha.17

3 years ago

0.1.1-alpha.16

3 years ago

0.1.1-alpha.15

3 years ago

0.1.1-alpha.14

3 years ago

0.1.1-alpha.13

3 years ago

0.1.1-alpha.12

3 years ago

0.1.1-alpha.11

3 years ago

0.1.1-alpha.10

3 years ago

0.1.1-alpha.9

3 years ago

0.1.1-alpha.8

3 years ago

0.1.1-alpha.7

3 years ago

0.1.1-alpha.6

3 years ago

0.1.1-alpha.5

3 years ago

0.1.1-alpha.4

3 years ago

0.1.1-alpha.3

3 years ago

0.1.1-alpha.2

3 years ago

0.1.1-alpha.1

3 years ago

0.1.1-alpha.0

3 years ago