UI Components

Tabs (Segmented Button)

Tabs component (also known as Segmented Button) allows users to switch between different views or sections within the same context. It organizes related content into distinct sections, showing only one at a time. Based on Radix UI for full accessibility and keyboard navigation support.

Sizes

Tabs are available in two sizes: Large (36px) and Small (28px).

Large (36px)

Height: 36px, Padding: 8px 16px, Font: 16px, Gap: 8px

Content for Tab 1

Small (28px)

Height: 28px, Padding: 8px, Font: 12px, Gap: 8px

Content for Tab 1

Types

Tabs support different content types: text only, with icon, or with badge.

1. Text Only

Simple tabs with only text labels.

Overview

Dashboard overview with key metrics and statistics.

2. With Icon

Tabs with icons for better visual identification.

Profile

Manage your profile information.

3. With Badge

Tabs with badges to show counts or status indicators.

All Items (12)

Showing all items in the system.

4. With Icon + Badge

Tabs with both icon and badge for enhanced visual information.

Messages (3)

You have 3 unread messages.

5. With Outline

Tabs with border outline for better visual separation.

Content for Tab 1 with outline.

6. With Outline + Icon

Tabs with outline and icon combination.

Profile content with outline.

States

Tabs have four visual states: default, hovered, selected, and disabled.

Default State

Unselected and idle. Text color: #A5AEB5 (gray-500). Background: white.

Hovered State

Displayed when hovering over unselected tab. Text color changes to #0D161F (gray-900).

Hover over the tabs below to see the hover state

Selected State

Active tab. Text color: #0D161F (gray-900), Border: 1px solid #E9EBED, Shadow applied.

Disabled State

Non-interactive tab. Opacity: 0.5, cursor: not-allowed.

Landing Page Tabs

Special tab variant for landing pages with logo and text. Features responsive design that automatically adapts between desktop and mobile layouts.

Responsive Layout

Automatically adapts: Desktop (horizontal, 216×64px) → Mobile (vertical, 112×80px). Resize window to see the effect. Active tab shows active logo with 3° tilt right applied via CSS. Inactive tabs show default logo without grayscale filter.

NoBad.link

Link safety and security checking service.

Mobile Layout Presentation

Preview of how the component looks on mobile devices. Vertical layout with logo above text. Active logo with 3° tilt right (via CSS) is shown when tab is active, default logo shown when inactive (no grayscale filter).

NoBad.link

Link safety and security checking service.

With Navigation (Optional)

Tabs can have optional href prop for navigation to other domains. By default, links open in the same tab. Use target="_blank" to open in new tab (must be explicitly provided). Use rel="noopener noreferrer" for security with external links (must be explicitly provided). Active tab (current site) has no href and works as regular tab.

Humanizer.link Logo
Humanizer.link
Short.link Logo
Short.link

NoBad.link

Link safety and security checking service.

Styling Details

Desktop Layout (default)

  • Size: 216px × 64px
  • Layout: Horizontal (logo + text in row)
  • Padding: 4px 16px
  • Gap: 8px between logo and text
  • Font: 20px, 800 weight, -2% letter spacing
  • Border radius: 8px
  • Gap between tabs: 16px
  • Container: center alignment

Mobile Layout (max-md breakpoint)

  • Size: 112px × 80px
  • Layout: Vertical (logo above text)
  • Padding: 4px 16px
  • Gap: 2px between logo and text
  • Font: 12px, 800 weight, -2% letter spacing
  • Border radius: 8px
  • Container: space-between (max width 343px)

States

  • Default: 40% opacity, white background, default logo (no grayscale)
  • Hovered: #F4F5F6 background
  • Selected: 100% opacity, white background, #E9EBED border, shadow, active logo with 3° tilt right (via CSS)
  • Desktop shadow: 0px 3px 16px rgba(16,24,40,0.08), 0px 2px 24px rgba(16,24,40,0.06)
  • Mobile shadow: 0px 3px 12px rgba(16,24,40,0.08), 0px 1px 16px rgba(16,24,40,0.06)

Logo Behavior

  • If logoActiveSrc provided: shows active logo with 3° tilt right (via CSS) when tab is active
  • If logoActiveSrc provided: shows default logo when tab is inactive (NO grayscale filter)
  • If no logoActiveSrc: uses default logo in both active and inactive states
  • Logo images should be 40×40px (SVG recommended)
  • Logo rotation (3° right) is applied via CSS, not baked into SVG files

Navigation

  • Optional href prop for navigation to other domains
  • Active tab (current site) should NOT have href
  • Tabs with href will navigate on click (no tab switching)
  • target and rel props are NOT set by default (must be explicitly provided)
  • Uses Next.js Link component for navigation

Usage

  • Responsive by default - no device prop needed
  • Automatically adapts layout based on screen size
  • Pass tab data array with content to LandingPageTabs
  • Logo images should be placed in /public/tabs/ folder
  • Content is rendered automatically from data
  • Customize content styles via className props
  • Use standard Radix Tabs API (value, onValueChange, etc.)

Usage Examples

Common use cases for the Tabs component.

File Manager

Documents

All your documents in one place.

Status Filters with Counts

All 24 tasks across all statuses.

Mixed Types

Overview dashboard.

Styling Details

Tabs follow precise design specifications from the design system.

Size Large

  • Height: 36px (h-9)
  • Padding: 8px vertical, 16px horizontal (py-2 px-4)
  • Font: Inter, 16px, Regular (400 weight)
  • Line height: 120%
  • Gap: 8px (for icon/badge)
  • Border radius: 8px

Size Small

  • Height: 28px (h-7)
  • Padding: 8px horizontal and vertical (py-2 px-2)
  • Font: Inter, 12px, Regular (400 weight)
  • Line height: 120%
  • Gap: 8px (for icon/badge)
  • Border radius: 8px

States

  • Default: text #A5AEB5, no border
  • Hovered: text #0D161F
  • Selected: text #0D161F, border 1px #E9EBED, shadow
  • Disabled: opacity 0.5

Accessibility

The Tabs component is built on Radix UI primitives, ensuring full accessibility support.

  • ✓ Keyboard navigation: Arrow keys to navigate between tabs, Enter/Space to activate
  • ✓ ARIA attributes: Proper roles, states, and properties for screen readers
  • ✓ Focus management: Visible focus indicators and logical tab order
  • ✓ Screen reader support: Announces selected tab and available options
  • ✓ Semantic HTML: Uses proper tab roles and landmarks

Usage Guidelines

  • ✓ Use tabs to organize related content into separate views
  • ✓ Keep tab labels short and descriptive (1-2 words ideal)
  • ✓ Use icons for better visual recognition when appropriate
  • ✓ Use badges to show counts or status indicators
  • ✓ Limit the number of tabs (3-5 is optimal, max 7)
  • ✗ Don't use tabs for sequential steps (use a stepper component instead)
  • ✗ Don't nest tabs inside other tabs
  • ✗ Don't use tabs for navigation between different pages (use proper navigation instead)