Skip to main content

ns-tab

Introduction#

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.

Usage#

View example on Storybook

Component placement#

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

Specification#

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

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"
    }
  }
}

Feedback#

  • 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!