Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProIcon-only tabs that keep a real accessible name, show it in a tooltip on hover and focus and repeat it as a heading in the active panel.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this where horizontal space is tight and the icons are well known: side panels, inspector panes, mobile bars.
Do not use it for more than five tabs, or icons that are not standard. A text label is always clearer when there is room.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | { value, label, icon, content }[] | - | Tabs; label is required. |
defaultValue | string | first | Initial tab. |
aria-label gives each tab its name; the icon is aria-hidden, so no tab is ever nameless.h3 of the same name, which also tells touch users where they are.| Key | Action |
|---|---|
| ArrowLeft / ArrowRight | move between tabs and show the name |
| Tab | into the panel |
The pattern ships a Testing Library test (tabs-icon-tooltips.test.tsx) that covers accessible names, the focus tooltip and the panel heading.