Get StartedFoundationsComponentsPatternsIntegration
01.Get Started
02.Foundations
03.Components
04.Patterns
05.Integration
Overview
Accordion
Badge
Breadcrumb
Button
Gradient Button
FAB
Icon Button
Card
Checkbox
Chips
Date Picker
Dialogs
Divider
List
Loading
Menu
Options
Pagination
Radio
Scrollbar
Search
Selector
Skeleton
Slider
Swiper
Switch
Tabs
Text Field
TextArea
Toast
Tooltip

TABS

PreviousSwitch
Text FieldNext
ELFBAR Design

V 0.1.0

A design system built for BMD teams.

Brand Marketing Department

Resources

  • GitHub
  • Storybook
  • Figma

Documentation

  • Changelog
  • Components
  • Tokens
  • Global market globe

Brands

  • ELFBAR Official
  • LostMary Official

Copyright © 2026 ELFBAR. All rights reserved.

When to Use

Example: product detail — info tabs

Classic Mint Pod

Description
Specs
Reviews
  • Organizing related content into switchable views without page navigation
  • Reducing page length by grouping content into logical sections
  • Providing tabbed navigation within a card, panel, or page section

Usage Guidelines

DO

Keep tab labels short (1–2 words). Use Segmented for primary navigation, Underline for secondary contexts

Don’t

Don't nest tabs inside tabs. Don't exceed the recommended tab count (5 for Segmented, 7 for Underline)

Accessibility

  • Keyboard: Tab to focus, Arrow keys to navigate, Enter/Space to select
  • role="tablist" on container, role="tab" on triggers, role="tabpanel" on content
  • aria-selected on active tab, aria-controls linking tab to panel