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.


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

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.