NordSecurity.Design

Tabs

Overview

The tab component allows users to navigate to different sections of content within a single page.

Tabs helps group different content together in a limited space and helps divide dense content into individually accessible sections to make it easier for the user to read.

When to use

  • To have lots of content that is related in a limited amount of space
  • To let the user compare easily related products (i.e. pricing plans)

When not to use

  • To present FAQ - use Accordion
  • To present Steps in a process - use Stepper

Anatomy

  1. TabList
  2. Tab
  3. Tab active
  4. Tab icon
  5. Tab Panel

Variants & States

Variant

There are two main variants for this component. Underlined and pilled. The default variant is underlined and should be used in most cases. The pilled variant should only be used to communicate more of a choice, like in a pricing page comparing plans.

Icon

Tabs can have optional icons included in them to support the text visually.

States

The tab component makes use of two main states: default & hover. Only one tab at a time can be active

TabPaddingBottom

The tabPaddingBottom property of the TabList component adjusts the space between the tabs and the content that follows. Two options are available: lg and md, with lg as the default value.

Internationalization

For RTL (right-to-left) languages, there are no custom adjustments made.

Writing Guidelines

Minimal effort for the minimalistic component — our goal is to make the copy convey as much sense as possible while being really short.

Do
Fit in one word. If that mission is impossible, use two, but it will be your max.
Don’t
Fun fact: the following design was in production; as we compiled these guidelines, we realized that we can go without the abbreviation as the third word.
Do
Mind the context and choose THE word carefully to make it sound meaningful. The user should have a clear understanding of which content to expect under the specific tab.
Don’t
Don't use vague or unclear labels for tabs. Avoid generic terms that do not clearly indicate the content found under each tab, as this can confuse the user.
Do
Tab labels are like titles for the sections of information, so no punctuation is needed.
Don’t
Don't use punctuation in tab labels.
Do
Stick to the normal case. Even though using all caps is acceptable for specific design solutions with really short words, we don’t use it across the company.
Don’t
Using all caps can make text harder to read and is not a standard practice.
Do
If there are two words, make sure it’s a single line.
Don’t
Don't allow the two-word tab labels to break onto separate lines.

Properties

Name Type Values Description
variant String underlined
pilled
isActive Boolean true
false
disabled Boolean true
false
text String

Usage Guidelines

DoKeep the content structure simple by using only one level of tabs in each section.
Don’tNever nest tabs inside other tabs.
DoOnly one Tab can be active at one time.
Don’tNever have two tabs at the same time highlighted.
DoFit in one word. If that mission is impossible, use two, but it will be your max.
Don’tFun fact: the following design was in production; as we compiled these guidelines, we realized that we can go without the abbreviation as the third word.
DoMind the context and choose THE word carefully to make it sound meaningful. The user should have a clear understanding of which content to expect under the specific tab.
Don’tDon't use vague or unclear labels for tabs. Avoid generic terms that do not clearly indicate the content found under each tab, as this can confuse the user.
DoTab labels are like titles for the sections of information, so no punctuation is needed.
Don’tDon't use punctuation in tab labels.
DoStick to the normal case. Even though using all caps is acceptable for specific design solutions with really short words, we don’t use it across the company.
Don’tUsing all caps can make text harder to read and is not a standard practice.
DoIf there are two words, make sure it’s a single line.
Don’tDon't allow the two-word tab labels to break onto separate lines.

Content Guidelines

We use tabs to organize related content into helpful categories that are at the same level of hierarchy. Tabs help reduce cognitive load.

Voice and tone

We succinctly describe the content within the tab, using plain and neutral language.

Labels

  • We are specific and avoid generic or vague labels.
  • We order the tabs logically, placing the most important or most used first.
  • We keep labels short, ideally one or two words.
  • We do not truncate labels.
  • We allow space for labels in various languages
  • We keep the structure consistent across all tabs.
  • We keep labels on one row for scannability.
  • We do not use end punctuation.
  • We avoid ALL CAPS because it is harder to read.
DoCountries, Specialty servers, Devices
Don’tCountry options, Specialty servers, Devices in Meshnet for traffic…

Accessibility

  • When available, we provide a descriptive tab group name to give context.
  • Screen readers announce the tab label and its selected state. Position in the set may also be announced.
DoFAQ tab. General tab item. Selected. 1 of 5.
Don’tGeneral tab