0.2.3-alpha.421 • Published 2 months ago

@gemeente-denhaag/tab v0.2.3-alpha.421

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

Tabs

Tabs organise and allow users to move between content without having to navigate away from a page.

When to use

Use tabs when you are organisazing related content in a single cointainer or need to flip between multiple panes or sections. It’s a way to group content, connect related information, and is used as a tool to save space.

Alternatives and related components

Use anchor navigation on longer pages with multiple sub-headings when you don’t group the content into groups.

Anatomy

Tabs consists of:

  1. Label: describes the content contained within it.
  2. Line: this line shows the state of a tab
  3. Trailing icon: this icon shows that it is possible to view all tabs that are not visible on the screen
  4. Container

(Interactive) states

Tabs contains the states active, inactive, hover, disabled and focus.

Design properties

Typography

  • Label inactive: TheSans/md/400
  • Label active: TheSans/md/700

Color

  • Label inactive: text color Grey/4
  • Label active: text color Blue/3
  • Line inactive: fill color Grey/2
  • Line active: fill color Blue/3

Interactive states

  • Hover inactive: label color Blue/3, line color Grey/2
  • Disabled: label color Grey/2, line color Grey/2
  • Focus: border color Ocher/5, line color Grey/2

Structure

  • Label: padding-top and padding bottom 8px, padding-left and padding-right 16px
  • Line: width 2px, padding-top 8px
  • Trailing icon: size 16px, padding-left 4px

Mobile

  • Label (and trailing icon): centered

Accessibility

  • Tab, shift + tab - to move focus between tabs.
  • Space or Enter - to display the selected tab's content

Content guidelines

Order the tabs by priority or importance from left to right

Labels

  • Each tab label needs to describe the content contained within it.
  • Keep tab labels short and meaningful. Between 1-2 words is best and written in plain language. Keep in mind that at mobile widths and during translation, the character length of a label will impact the experience.
  • Ensure that each tab label is unique.
  • Do not use icons in tab labels.
  • Tab labels shouldn't be longer than one or two words and be accurate in their description.
  • Tab labels should also make sense when read in isolation.
  • Never truncate tab labels. If a label overruns the container, find a shorter alternative.
  • Do use title case for tab labels.

Best practices

Dos

Tabs should:

  • As a default, there must always be one tab that's already selected and the content panel below it must be visible.
  • Always be placed above the content it relates to.
  • Have a minimum number of 2 tabs.
  • Only one content panel can be shown at a time.
  • Have the same font size for the label text of each tab
  • Have one line of text for labels.
  • Have an order that should be consistent across an experience. Tabs with related content should be grouped adjacent to each other.

Don’ts

Tabs should:

  • Not be putted underneath the content it relates to.
  • The order of the tabs from left to right should never change. Only the content panel should change.
  • Not use two lines of text for labels.
  • Not use no more than six tabs in most scenarios. This maintains an uncluttered UI and reduces cognitive load for users.
  • Not be used for primary navigation.

Behavior

  • The first tab section is selected by default
  • Only one tab can be selected at a time
  • Currently selected tab is always highlighted
  • Tabs are scrollable by default and do not wrap to a second line

References

https://www.bbc.co.uk/gel/guidelines/tabs https://www.carbondesignsystem.com/components/tabs/usage https://www.freshconsulting.com/insights/blog/uiux-principle-21-when-and-when-not-to-use-tabs/

0.2.3-alpha.421

2 months ago

0.2.3-alpha.420

2 months ago

0.2.3-alpha.419

2 months ago

0.2.3-alpha.417

2 months ago

0.2.3-alpha.418

2 months ago

0.2.3-alpha.416

2 months ago

0.2.3-alpha.413

2 months ago

0.2.3-alpha.414

2 months ago

0.2.3-alpha.415

2 months ago

0.2.3-alpha.411

2 months ago

0.2.3-alpha.412

2 months ago

0.2.3-alpha.410

3 months ago

0.2.3-alpha.409

4 months ago

0.2.3-alpha.408

4 months ago

0.2.3-alpha.407

4 months ago

0.2.3-alpha.406

4 months ago

0.2.3-alpha.405

4 months ago

0.2.3-alpha.402

5 months ago

0.2.3-alpha.403

4 months ago

0.2.3-alpha.400

5 months ago

0.2.3-alpha.401

5 months ago

0.2.3-alpha.404

4 months ago

0.2.3-alpha.394

6 months ago

0.2.3-alpha.395

6 months ago

0.2.3-alpha.392

7 months ago

0.2.3-alpha.393

7 months ago

0.2.3-alpha.398

6 months ago

0.2.3-alpha.399

5 months ago

0.2.3-alpha.396

6 months ago

0.2.3-alpha.397

6 months ago

0.2.3-alpha.391

7 months ago

0.2.3-alpha.390

7 months ago

0.2.3-alpha.389

7 months ago

0.2.3-alpha.388

8 months ago

0.2.3-alpha.387

8 months ago

0.2.3-alpha.386

8 months ago

0.2.3-alpha.385

8 months ago

0.2.3-alpha.384

8 months ago

0.2.3-alpha.383

9 months ago

0.2.3-alpha.381

10 months ago

0.2.3-alpha.382

9 months ago

0.2.3-alpha.380

10 months ago

0.2.3-alpha.379

10 months ago

0.2.3-alpha.378

10 months ago

0.2.3-alpha.377

10 months ago

0.2.3-alpha.376

10 months ago

0.2.3-alpha.375

10 months ago

0.2.3-alpha.374

10 months ago

0.2.3-alpha.373

10 months ago

0.2.3-alpha.372

11 months ago

0.2.3-alpha.371

11 months ago

0.2.3-alpha.370

11 months ago

0.2.3-alpha.369

11 months ago

0.2.3-alpha.368

11 months ago

0.2.3-alpha.367

11 months ago

0.2.3-alpha.365

11 months ago

0.2.3-alpha.366

11 months ago

0.2.3-alpha.363

12 months ago

0.2.3-alpha.364

12 months ago

0.2.3-alpha.362

12 months ago

0.2.3-alpha.361

12 months ago

0.2.3-alpha.360

1 year ago

0.2.3-alpha.359

1 year ago

0.2.3-alpha.318

1 year ago

0.2.3-alpha.319

1 year ago

0.2.3-alpha.358

1 year ago

0.2.3-alpha.356

1 year ago

0.2.3-alpha.357

1 year ago

0.2.3-alpha.350

1 year ago

0.2.3-alpha.351

1 year ago

0.2.3-alpha.354

1 year ago

0.2.3-alpha.355

1 year ago

0.2.3-alpha.352

1 year ago

0.2.3-alpha.353

1 year ago

0.2.3-alpha.347

1 year ago

0.2.3-alpha.348

1 year ago

0.2.3-alpha.345

1 year ago

0.2.3-alpha.346

1 year ago

0.2.3-alpha.349

1 year ago

0.2.3-alpha.340

1 year ago

0.2.3-alpha.343

1 year ago

0.2.3-alpha.344

1 year ago

0.2.3-alpha.341

1 year ago

0.2.3-alpha.342

1 year ago

0.2.3-alpha.336

1 year ago

0.2.3-alpha.337

1 year ago

0.2.3-alpha.334

1 year ago

0.2.3-alpha.335

1 year ago

0.2.3-alpha.338

1 year ago

0.2.3-alpha.339

1 year ago

0.2.3-alpha.332

1 year ago

0.2.3-alpha.333

1 year ago

0.2.3-alpha.330

1 year ago

0.2.3-alpha.331

1 year ago

0.2.3-alpha.325

1 year ago

0.2.3-alpha.326

1 year ago

0.2.3-alpha.323

1 year ago

0.2.3-alpha.324

1 year ago

0.2.3-alpha.329

1 year ago

0.2.3-alpha.327

1 year ago

0.2.3-alpha.328

1 year ago

0.2.3-alpha.321

1 year ago

0.2.3-alpha.322

1 year ago

0.2.3-alpha.320

1 year ago

0.2.3-alpha.317

2 years ago

0.2.3-alpha.316

2 years ago

0.2.3-alpha.314

2 years ago

0.2.3-alpha.315

2 years ago

0.2.3-alpha.312

2 years ago

0.2.3-alpha.313

2 years ago

0.2.3-alpha.310

2 years ago

0.2.3-alpha.311

2 years ago

0.2.3-alpha.309

2 years ago

0.2.3-alpha.303

2 years ago

0.2.3-alpha.304

2 years ago

0.2.3-alpha.302

2 years ago

0.2.3-alpha.307

2 years ago

0.2.3-alpha.308

2 years ago

0.2.3-alpha.305

2 years ago

0.2.3-alpha.306

2 years ago

0.2.3-alpha.295

2 years ago

0.2.3-alpha.296

2 years ago

0.2.3-alpha.293

2 years ago

0.2.3-alpha.294

2 years ago

0.2.3-alpha.299

2 years ago

0.2.3-alpha.297

2 years ago

0.2.3-alpha.298

2 years ago

0.2.3-alpha.301

2 years ago

0.2.3-alpha.300

2 years ago

0.2.3-alpha.292

2 years ago

0.2.3-alpha.290

2 years ago

0.2.3-alpha.288

2 years ago

0.2.3-alpha.289

2 years ago

0.2.3-alpha.286

2 years ago

0.2.3-alpha.287

2 years ago

0.2.3-alpha.284

2 years ago

0.2.3-alpha.285

2 years ago

0.2.3-alpha.282

2 years ago

0.2.3-alpha.283

2 years ago

0.2.3-alpha.280

2 years ago

0.2.3-alpha.281

2 years ago

0.2.3-alpha.279

2 years ago

0.2.3-alpha.273

2 years ago

0.2.3-alpha.274

2 years ago

0.2.3-alpha.271

2 years ago

0.2.3-alpha.272

2 years ago

0.2.3-alpha.277

2 years ago

0.2.3-alpha.278

2 years ago

0.2.3-alpha.275

2 years ago

0.2.3-alpha.276

2 years ago

0.2.3-alpha.270

2 years ago

0.2.3-alpha.268

2 years ago

0.2.3-alpha.269

2 years ago

0.2.3-alpha.262

2 years ago

0.2.3-alpha.263

2 years ago

0.2.3-alpha.260

2 years ago

0.2.3-alpha.261

2 years ago

0.2.3-alpha.266

2 years ago

0.2.3-alpha.267

2 years ago

0.2.3-alpha.264

2 years ago

0.2.3-alpha.265

2 years ago

0.2.3-alpha.259

2 years ago

0.2.3-alpha.258

2 years ago

0.2.3-alpha.237

2 years ago

0.2.3-alpha.238

2 years ago

0.2.3-alpha.235

2 years ago

0.2.3-alpha.236

2 years ago

0.2.3-alpha.239

2 years ago

0.2.3-alpha.230

2 years ago

0.2.3-alpha.233

2 years ago

0.2.3-alpha.234

2 years ago

0.2.3-alpha.231

2 years ago

0.2.3-alpha.232

2 years ago

0.2.3-alpha.226

3 years ago

0.2.3-alpha.227

3 years ago

0.2.3-alpha.224

3 years ago

0.2.3-alpha.225

3 years ago

0.2.3-alpha.228

3 years ago

0.2.3-alpha.229

3 years ago

0.2.3-alpha.222

3 years ago

0.2.3-alpha.223

3 years ago

0.2.3-alpha.220

3 years ago

0.2.3-alpha.221

3 years ago

0.2.3-alpha.215

3 years ago

0.2.3-alpha.216

3 years ago

0.2.3-alpha.213

3 years ago

0.2.3-alpha.214

3 years ago

0.2.3-alpha.219

3 years ago

0.2.3-alpha.217

3 years ago

0.2.3-alpha.218

3 years ago

0.2.3-alpha.211

3 years ago

0.2.3-alpha.212

3 years ago

0.2.3-alpha.210

3 years ago

0.2.3-alpha.208

3 years ago

0.2.3-alpha.209

3 years ago

0.2.3-alpha.206

3 years ago

0.2.3-alpha.207

3 years ago

0.2.3-alpha.257

2 years ago

0.2.3-alpha.251

2 years ago

0.2.3-alpha.252

2 years ago

0.2.3-alpha.250

2 years ago

0.2.3-alpha.255

2 years ago

0.2.3-alpha.256

2 years ago

0.2.3-alpha.253

2 years ago

0.2.3-alpha.254

2 years ago

0.2.3-alpha.248

2 years ago

0.2.3-alpha.249

2 years ago

0.2.3-alpha.246

2 years ago

0.2.3-alpha.247

2 years ago

0.2.3-alpha.240

2 years ago

0.2.3-alpha.241

2 years ago

0.2.3-alpha.244

2 years ago

0.2.3-alpha.245

2 years ago

0.2.3-alpha.242

2 years ago

0.2.3-alpha.243

2 years ago

0.2.3-alpha.196

3 years ago

0.2.3-alpha.194

3 years ago

0.2.3-alpha.195

3 years ago

0.2.3-alpha.198

3 years ago

0.2.3-alpha.199

3 years ago

0.2.3-alpha.192

3 years ago

0.2.3-alpha.193

3 years ago

0.2.3-alpha.204

3 years ago

0.2.3-alpha.205

3 years ago

0.2.3-alpha.202

3 years ago

0.2.3-alpha.203

3 years ago

0.2.3-alpha.200

3 years ago

0.2.3-alpha.201

3 years ago

0.2.3-alpha.190

3 years ago

0.2.3-alpha.191

3 years ago

0.2.3-alpha.185

3 years ago

0.2.3-alpha.186

3 years ago

0.2.3-alpha.183

3 years ago

0.2.3-alpha.184

3 years ago

0.2.3-alpha.189

3 years ago

0.2.3-alpha.187

3 years ago

0.2.3-alpha.188

3 years ago

0.2.3-alpha.181

3 years ago

0.2.3-alpha.182

3 years ago

0.2.3-alpha.180

3 years ago

0.2.3-alpha.174

3 years ago

0.2.3-alpha.175

3 years ago

0.2.3-alpha.172

3 years ago

0.2.3-alpha.173

3 years ago

0.2.3-alpha.178

3 years ago

0.2.3-alpha.179

3 years ago

0.2.3-alpha.176

3 years ago

0.2.3-alpha.177

3 years ago

0.2.3-alpha.170

3 years ago

0.2.3-alpha.171

3 years ago

0.2.3-alpha.169

3 years ago

0.2.3-alpha.163

3 years ago

0.2.3-alpha.164

3 years ago

0.2.3-alpha.161

3 years ago

0.2.3-alpha.162

3 years ago

0.2.3-alpha.167

3 years ago

0.2.3-alpha.168

3 years ago

0.2.3-alpha.165

3 years ago

0.2.3-alpha.166

3 years ago

0.2.3-alpha.160

3 years ago

0.2.3-alpha.158

3 years ago

0.2.3-alpha.159

3 years ago

0.2.3-alpha.152

3 years ago

0.2.3-alpha.153

3 years ago

0.2.3-alpha.150

3 years ago

0.2.3-alpha.151

3 years ago

0.2.3-alpha.156

3 years ago

0.2.3-alpha.157

3 years ago

0.2.3-alpha.154

3 years ago

0.2.3-alpha.155

3 years ago

0.2.3-alpha.149

3 years ago

0.2.3-alpha.147

3 years ago

0.2.3-alpha.148

3 years ago

0.2.3-alpha.141

3 years ago

0.2.3-alpha.142

3 years ago

0.2.3-alpha.140

3 years ago

0.2.3-alpha.145

3 years ago

0.2.3-alpha.146

3 years ago

0.2.3-alpha.143

3 years ago

0.2.3-alpha.144

3 years ago

0.2.3-alpha.138

3 years ago

0.2.3-alpha.139

3 years ago

0.2.3-alpha.136

3 years ago

0.2.3-alpha.137

3 years ago

0.2.3-alpha.130

3 years ago

0.2.3-alpha.131

3 years ago

0.2.3-alpha.134

3 years ago

0.2.3-alpha.135

3 years ago

0.2.3-alpha.132

3 years ago

0.2.3-alpha.133

3 years ago

0.2.3-alpha.127

3 years ago

0.2.3-alpha.128

3 years ago

0.2.3-alpha.129

3 years ago

0.2.3-alpha.116

3 years ago

0.2.3-alpha.117

3 years ago

0.2.3-alpha.114

3 years ago

0.2.3-alpha.115

3 years ago

0.2.3-alpha.118

3 years ago

0.2.3-alpha.119

3 years ago

0.2.3-alpha.112

3 years ago

0.2.3-alpha.113

3 years ago

0.2.3-alpha.110

3 years ago

0.2.3-alpha.111

3 years ago

0.2.3-alpha.105

3 years ago

0.2.3-alpha.106

3 years ago

0.2.3-alpha.103

3 years ago

0.2.3-alpha.104

3 years ago

0.2.3-alpha.109

3 years ago

0.2.3-alpha.107

3 years ago

0.2.3-alpha.108

3 years ago

0.2.3-alpha.101

3 years ago

0.2.3-alpha.102

3 years ago

0.2.3-alpha.100

3 years ago

0.2.3-alpha.98

3 years ago

0.2.3-alpha.97

3 years ago

0.2.3-alpha.96

3 years ago

0.2.3-alpha.95

3 years ago

0.2.3-alpha.99

3 years ago

0.2.3-alpha.94

3 years ago

0.2.3-alpha.93

3 years ago

0.2.3-alpha.92

3 years ago

0.2.3-alpha.91

3 years ago

0.2.3-alpha.87

3 years ago

0.2.3-alpha.86

3 years ago

0.2.3-alpha.85

3 years ago

0.2.3-alpha.84

3 years ago

0.2.3-alpha.125

3 years ago

0.2.3-alpha.126

3 years ago

0.2.3-alpha.83

3 years ago

0.2.3-alpha.82

3 years ago

0.2.3-alpha.81

3 years ago

0.2.3-alpha.80

3 years ago

0.2.3-alpha.76

3 years ago

0.2.3-alpha.120

3 years ago

0.2.3-alpha.75

3 years ago

0.2.3-alpha.74

3 years ago

0.2.3-alpha.73

3 years ago

0.2.3-alpha.123

3 years ago

0.2.3-alpha.124

3 years ago

0.2.3-alpha.79

3 years ago

0.2.3-alpha.121

3 years ago

0.2.3-alpha.78

3 years ago

0.2.3-alpha.77

3 years ago

0.2.3-alpha.72

3 years ago

0.2.3-alpha.71

3 years ago

0.2.3-alpha.70

3 years ago

0.2.3-alpha.65

3 years ago

0.2.3-alpha.64

3 years ago

0.2.3-alpha.63

3 years ago

0.2.3-alpha.62

3 years ago

0.2.3-alpha.69

3 years ago

0.2.3-alpha.68

3 years ago

0.2.3-alpha.67

3 years ago

0.2.3-alpha.66

3 years ago

0.2.3-alpha.61

3 years ago

0.2.3-alpha.60

3 years ago

0.2.3-alpha.58

3 years ago

0.2.3-alpha.57

3 years ago

0.2.3-alpha.59

3 years ago

0.2.3-alpha.54

3 years ago

0.2.3-alpha.53

3 years ago

0.2.3-alpha.52

3 years ago

0.2.3-alpha.51

3 years ago

0.2.3-alpha.56

3 years ago

0.2.3-alpha.55

3 years ago

0.2.3-alpha.50

3 years ago

0.2.3-alpha.43

3 years ago

0.2.3-alpha.42

3 years ago

0.2.3-alpha.41

3 years ago

0.2.3-alpha.47

3 years ago

0.2.3-alpha.46

3 years ago

0.2.3-alpha.45

3 years ago

0.2.3-alpha.44

3 years ago

0.2.3-alpha.49

3 years ago

0.2.3-alpha.48

3 years ago

0.2.3-alpha.40

3 years ago

0.2.3-alpha.36

3 years ago

0.2.3-alpha.39

3 years ago

0.2.3-alpha.38

3 years ago

0.2.3-alpha.37

3 years ago

0.2.3-alpha.35

3 years ago

0.2.3-alpha.34

3 years ago

0.2.3-alpha.33

3 years ago

0.2.3-alpha.32

3 years ago

0.2.3-alpha.31

3 years ago

0.2.3-alpha.30

3 years ago

0.2.3-alpha.29

3 years ago

0.2.3-alpha.28

3 years ago

0.2.3-alpha.27

3 years ago

0.2.3-alpha.25

3 years ago

0.2.3-alpha.26

3 years ago

0.2.3-alpha.24

3 years ago

0.2.3-alpha.23

3 years ago

0.2.3-alpha.22

3 years ago

0.2.3-alpha.21

3 years ago

0.2.3-alpha.20

3 years ago

0.2.3-alpha.19

3 years ago

0.2.3-alpha.18

3 years ago

0.2.3-alpha.17

3 years ago

0.2.3-alpha.16

3 years ago

0.2.3-alpha.15

3 years ago

0.2.3-alpha.14

3 years ago

0.2.3-alpha.13

3 years ago

0.2.3-alpha.12

3 years ago

0.2.3-alpha.11

3 years ago

0.2.3-alpha.10

3 years ago

0.2.3-alpha.9

3 years ago

0.2.3-alpha.8

3 years ago

0.2.3-alpha.7

3 years ago

0.2.3-alpha.6

3 years ago

0.2.3-alpha.5

3 years ago

0.2.3-alpha.4

3 years ago

0.2.3-alpha.3

3 years ago

0.2.3-alpha.2

3 years ago

0.2.1

3 years ago

0.2.2

3 years ago

0.2.0

3 years ago

0.1.7

4 years ago