Skip to main content

Tab (CSS) Migration

Reason for Deprecation​

Tab was a CSS component that only provided visual formatting. The tab switch logic was not built in, relying instead on native HTML input/radio behaviour.

New Component to Use​

Replace CSS tabs with <e-tab-bar>.

Tab-bar Benefits​

  • Built-in tab switch logic.
  • Icon support via API attribute.
  • Badge support via API attribute.
  • Full keyboard accessibility.
  • Fires an event when a tab header is clicked.

Before vs After​

Basic Tabs​

Before — Tab (CSS)​

Preview
Open in playground →

After — Tab-bar​

Preview
Open in playground →

Tabs with Icons​

Before — Tab (CSS) with icon​

Preview
Open in playground →

After — Tab-bar with icon​

Preview
Open in playground →