ClosableTabs

A strip of open documents or pages that the reader can close, as in an editor or a browser. A dot marks unsaved changes and turns into the close button on hover or focus.

ClosableTabs

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, ClosableTabs

App.tsx

README.md

a-very-long-file-name-that-does-not-fit.config.ts

Documentation

Status page

Dark theme, ClosableTabs

App.tsx

README.md

a-very-long-file-name-that-does-not-fit.config.ts

Documentation

Status page

High contrast theme, ClosableTabs

App.tsx

README.md

a-very-long-file-name-that-does-not-fit.config.ts

Documentation

Status page

UsageLink to the section Usage

tsx

import { ClosableTabs } from '@skribly/ui/navigation'

tsx

<ClosableTabs label="Open files" items={files} selectedId={active} onSelect={setActive}
  onClose={close} closeLabel="Close" dirtyLabel="unsaved changes" emptyLabel="No open files" />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

Arrow keys move between tabs, Enter or Space opens one, Delete or Backspace closes the focused tab and focus moves to its neighbour.
Each close button is a real 24px button named with the tab, such as "Close App.tsx", so pointer and touch screen readers reach it.
Unsaved state is read as part of the tab name, not shown by the dot alone.

This demo runs through axe in all three themes on every test run. See what the tests check.