Tab
Overview
Tab is a navigation component that allows users to switch between different views or sections within the same context without leaving the current page.
The Tab component supports two types:
-
Default
-
With Icon
Each tab type supports three states:
-
Initial
-
Hover
-
Selected
Default
The Default tab contains a text label only.
Initial
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Hover
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Selected
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
With Icon
The With Icon tab contains both an icon and a text label.
Initial
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Hover
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Selected
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
User Experience
✨ Tabs should be arranged in a logical order that reflects content hierarchy.
✨ Only one tab can be selected at a time.
✨ Hover state should clearly indicate that the tab is interactive.
✨ Selected state must be visually distinct from Initial and Hover states.
✨ Clicking on a tab should immediately update the displayed content.
✨ Tabs should remain visible so users can easily switch between sections.
✨ Use icons only when they add clarity and meaning to the tab label.
Figma
All details and specifications in the design can be referenced through the Figma link below.