# code/editor/FileTabPill (zidane-ui/code/editor)

Import: `import { … } from 'zidane-ui/code/editor'`. Source: [ui/src/code/editor/FileTabPill.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/FileTabPill.tsx).

## Components

### `FileTabPill`

Component.

Open-file tab: the panel strip's pill with the file's glyph; a dot while unsaved.

```ts
function FileTabPill(props: FileTabPillProps): Element
```

**Parameters**

- `props` (`FileTabPillProps`): The tab's file, state and handlers; `onMove` turns on the keyboard reorder.

**Returns** `Element`

**Props**

- `active` (`boolean`): The tab shown in the column; it keeps its close button.
- `className?` (`string`): Extra classes on the root element.
- `dirty?` (`boolean`): Unsaved edits: a dot replaces the close glyph until hover.
- `glyph?` (`ReactNode`): Drawn before the name. Default: the file tree's icon for `path`.
- `label?` (`string`): Shown in place of the file's name (a tab that is not a file).
- `lifted?` (`boolean`): Held by a drag (`ReorderTabs`).
- `onClose` (`() => void`): The close button or a middle-click.
- `onContextMenu?` (`(at: { x: number; y: number }) => void`): Right-click, with the pointer's viewport coordinates; the browser menu is suppressed only when set.
- `onMove?` (`(delta: number) => void`): Alt+Shift+←/→ moves the tab one slot (-1 / +1).
- `onPick` (`() => void`): The tab was selected (click or keyboard).
- `path` (`string`): The open file (or view id); its last segment is the tab's name.
- `readOnly?` (`boolean`): Shown read-only (a type definition): said in the title.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `title?` (`string`): The tooltip. Default: the path, or what unsaved or read-only says.

Source: [ui/src/code/editor/FileTabPill.tsx:44](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/FileTabPill.tsx#L44)

## Interfaces

### `FileTabPillProps`

Interface.

Props for [`FileTabPill`](https://zidane.si/docs/reference/ui-code-editor-file-tab-pill.md#FileTabPill).

```ts
interface FileTabPillProps
```

**Properties**

- `active` (`boolean`): The tab shown in the column; it keeps its close button.
- `className?` (`string`): Extra classes on the root element.
- `dirty?` (`boolean`): Unsaved edits: a dot replaces the close glyph until hover.
- `glyph?` (`ReactNode`): Drawn before the name. Default: the file tree's icon for `path`.
- `label?` (`string`): Shown in place of the file's name (a tab that is not a file).
- `lifted?` (`boolean`): Held by a drag (`ReorderTabs`).
- `onClose` (`() => void`): The close button or a middle-click.
- `onContextMenu?` (`(at: { x: number; y: number }) => void`): Right-click, with the pointer's viewport coordinates; the browser menu is suppressed only when set.
- `onMove?` (`(delta: number) => void`): Alt+Shift+←/→ moves the tab one slot (-1 / +1).
- `onPick` (`() => void`): The tab was selected (click or keyboard).
- `path` (`string`): The open file (or view id); its last segment is the tab's name.
- `readOnly?` (`boolean`): Shown read-only (a type definition): said in the title.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `title?` (`string`): The tooltip. Default: the path, or what unsaved or read-only says.

Source: [ui/src/code/editor/FileTabPill.tsx:8](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/FileTabPill.tsx#L8)