Skip to main content



The singular tab that dictates what the area is about.

The tab is the button that can be clicked to change the content in the ns-tabs. It shows the user what content there is with a heading and an optional icon.

Content guidance#

Please see ns-tabs for full content guidance.

Best practice#

๐Ÿ’š Do's๐Ÿ’” Don'ts
Always add heading textAdd an icon to one tab and not to the other tabs
Add more than 2 words to the heading
Add different types of icons (solid, outline, functional)

Considerations of best practice#

  • Only use inside ns-tabs as a slot of tab.


View example on Storybook

Component placement#

The ns-tab component can only be used in the ns-tabs component.


iconstringPlease see the documentation for ns-iconOptional icon to add to the tab.
selectedbooleanfalsetrue, falsePre-selected tab
tabselectedSends a event when tab is selected.

Design Tokens

You can change the branded look and feel of the ns-tab by modifying these options in the design tokens.

Read more about design tokens in our getting started guide.

  "typography": "action",
  "background-color": "#FFFFFF",
  "color": "#333F48",
  "border-color": "#C8C9C7",
  "text-decoration-color": "rgba(51, 63, 72, .25)",
  "spacer": {
    "inside-top": "0.75rem",
    "inside-right": "1.5rem",
    "inside-bottom": "0.75rem",
    "inside-left": "1.5rem"
  "icon": {
    "spacer": {
      "outside-right": "0.75rem"
  "focus": {
    "border-color": "#005EB8"
  "selected": {
    "typography": "action",
    "color": "#005EB8",
    "background-color": "#FFFFFF"
  "has-icon": {
    "spacer": {
      "inside-left": "1rem"


  • Do you have insights or concerns to share? You can raise an issue via Github bugs.
  • See all the issues already raised via Github issues.

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ You can also contact the team on Slack on the #product-nucleus channel!