feat: Improve CodeTabs tab naming

[naveenkarmegam]

Description

This PR updates the secondary label styling of the tab components to improve visual clarity and consistency. It also updates the Storybook examples to reflect the new design for easier reference and validation.
Relevant screenshots have been attached for comparison and review

Light mode:

Dark mode :

Related Issues

Related to #8549

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run pnpm format to ensure the code follows the style guide.
• I have run pnpm test to check if all tests are passing.
• I have run pnpm build to check if the website builds without errors.
• I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
nodejs-org	Ready	Preview	Jan 15, 2026 7:31am

[github-actions]

👋 Codeowner Review Request

The following codeowners have been identified for the changed files:

Team reviewers: @nodejs/nodejs-website

Please review the changes when you have a chance. Thank you! 🙏

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 98	🟢 96	🟢 100	🟢 100	🔗
/en/about	🟢 99	🟢 97	🟢 100	🟠 88	🔗
/en/about/previous-releases	🟢 98	🟢 100	🟢 100	🟢 100	🔗
/en/download	🟢 96	🟢 100	🟢 100	🟢 100	🔗
/en/download/archive/current	🟢 100	🟢 100	🟢 100	🟢 100	🔗
/en/blog	🟢 99	🟢 100	🟢 96	🟢 100	🔗

[ovflowd]

nit: the secondary label border style (padding) differs from Figma.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 75.01%. Comparing base (7a949e8) to head (c512d6d).
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8552      +/-   ##
==========================================
+ Coverage   74.96%   75.01%   +0.04%     
==========================================
  Files         103      103              
  Lines        9036     9036              
  Branches      312      311       -1     
==========================================
+ Hits         6774     6778       +4     
+ Misses       2260     2256       -4     
  Partials        2        2              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ovflowd]

nit: my understanding is that this change won't actually affect existing code snippet boxes, for the website, (cc @nodejs/nodejs-website) do we want to update existing code snippet labels?

For doc-kit, cc @avivkeller I believe we can simply call most of the in-box code-snippet as "Example", but I worry it would require us to actually change in-source code-snippets (the raw md files)... I wonder if this is the right way of achieving what @canerakdas proposed?

[avivkeller]

You should have tabs with and without secondary labels

[avivkeller]

For doc-kit, cc @avivkeller I believe we can simply call most of the in-box code-snippet as "Example", but I worry it would require us to actually change in-source code-snippets (the raw md files)... I wonder if this is the right way of achieving what @canerakdas proposed?

We'd probably have update the Shiki plugin to change the way it works, rather than changing the raw markdown files. This would also apply to the website.

[canerakdas]

For doc-kit, cc @avivkeller I believe we can simply call most of the in-box code-snippet as "Example", but I worry it would require us to actually change in-source code-snippets (the raw md files)... I wonder if this is the right way of achieving what @canerakdas proposed?

I’m wondering whether we could handle this with only CSS by adding content: "Example" via ::before when there are more than two tabs, without making many changes in doc-kit. Applying it unconditionally to all tabs is also an option, but I’m not sure how it would look in general usage 🤔

[naveenkarmegam]

@ovflowd @avivkeller

Thanks for calling this out — this change is mainly meant to showcase the visual output and behavior as a reference and to gather feedback before we lock anything in.
That’s why, for now, I’ve only updated the CSS and Storybook to demonstrate the idea.
Once the direction is finalized, we can decide the best approach and proceed with broader updates if needed.
Do you have any idea ?

[ovflowd]

For doc-kit, cc @avivkeller I believe we can simply call most of the in-box code-snippet as "Example", but I worry it would require us to actually change in-source code-snippets (the raw md files)... I wonder if this is the right way of achieving what @canerakdas proposed?

I’m wondering whether we could handle this with only CSS by adding content: "Example" via ::before when there are more than two tabs, without making many changes in doc-kit. Applying it unconditionally to all tabs is also an option, but I’m not sure how it would look in general usage 🤔

Not sure I'm a fan of CSS-only solution... That'd force the "Example" tag on all codeboxes

[naveenkarmegam]

In cases where we only have an MJS example today, do we plan to introduce a CJS example later?