Active theme set to LightDarkLight high contrastDark high contrast and saved in preferences.
Copied to clipboard.
Error submitting your feedback! Please try again.

TabReady

The interactive tab button for use within the tab group component.

Edit in CodePen
Open in new window
View RTL
<nord-tab-group label="Tabs">
<nord-tab slot="tab">Profile</nord-tab>
<nord-tab slot="tab" selected>Settings</nord-tab>
</nord-tab-group>

Properties

PropertyAttributeDescriptionTypeDefault
selectedselected

Whether the tab item is selected

booleanfalse

Slots

Slot nameDescription
Default slotThe tab button content.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

PropertyDescriptionDefault
--n-tab-color

Controls the text color of the tab, using our color tokens.

var(--n-color-text-weak)
--n-tab-font-weight

Controls the font weight of the tab, using our font tokens.

var(--n-font-weight)

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do #

  • Use the tab component within the tab group component.
  • Use the selected option to signify if the tab is selected.
  • Use text, icons and other non-interactive content within the tab.

Don’t #

  • Don’t use tabs to navigate to other pages. Use navigation or links instead.
  • Don't use the tab component outside of the tab group component.
  • Don't add interactive elements, such as buttons and links, inside the tab component.

Content guidelines #

When writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

My tasks
My Tasks

Avoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:

Dashboard
The dashboard

Avoid ending tab labels in punctuation:

Patients
Patients.

Use as few words as possible to describe each tab label:

Payments
Payments in your clinic

Avoid all caps for tab labels:

Dashboard
DASHBOARD

Additional considerations #

  • If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.
  • If there is a particular section you wish to show out of order of the tabs UI itself consider using the selected option to select the tab but prevent the order of the tabs being affected.

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Localization

Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For full localization guidelines, please see Localization documentation.

Localization Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.