# components/TabPill (zidane-ui) Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/TabPill.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/TabPill.tsx). ## Components ### `CountBadge` Component. The one count badge. `attention` is the agent waiting on the user (warn fill, soft pulse while it lasts); `info` a quiet count set into its surface; `neutral` an extension's own badge. ```ts function CountBadge(props: CountBadgeProps): Element ``` **Parameters** - `props` (`CountBadgeProps`): Component props. **Returns** `Element` **Props** - `className?` (`string`): Extra classes on the root element. - `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own. - `text` (`string`): The count or short label to show. - `tone` (`CountTone`): Look of the badge, see [`CountTone`](https://zidane.si/docs/reference/ui-components-tab-pill.md#CountTone). Source: [ui/src/components/TabPill.tsx:169](https://github.com/Tahul/zidane/blob/main/ui/src/components/TabPill.tsx#L169) ### `TabPill` Component. Renders a tab in a `.zg-segment` track. The selected tab is the raised chip, and the close button shows on hover. A tab is one control for keyboard and assistive tech: Delete or Backspace on the focused tab closes it, and the close button is out of the tab order. ```ts function TabPill(props: TabPillProps): Element ``` **Parameters** - `props` (`TabPillProps`): Component props. **Returns** `Element` **Props** - `className?` (`string`): Extra classes on the wrapping element. - `closeAlways?` (`boolean`, default `false`): Show the close button always, not only on hover or focus. - `closeLabel` (`string`): Accessible name and tooltip of the close button. - `keyShortcuts?` (`string`): Keyboard shortcut of the tab, announced through `aria-keyshortcuts`, such as `Control+1`. - `label` (`ReactNode`): Content of the tab. - `leading?` (`ReactNode`): Content before the label, such as a file icon. - `lifted?` (`boolean`): Raised without being selected (the pill being dragged). - `marker?` (`ReactNode`): Overlay on the close button's corner, such as an unsaved or updated dot. - `onAuxClick?` (`(e: MouseEvent) => void`): Called on a non-primary click on the tab, such as a middle-click. - `onClose` (`() => void`): Called when the close button is clicked, or on Delete or Backspace on the focused tab. - `onContextMenu?` (`(e: MouseEvent) => void`): Called on a right-click on the tab. - `onKeyDown?` (`(e: KeyboardEvent) => void`): Called on key down on the tab, before the built-in Delete and Backspace handling. Call `preventDefault` to skip it. - `onSelect` (`() => void`): Called when the tab is clicked. - `selected` (`boolean`): Whether this is the current tab. Sets `aria-selected` and the raised chip. - `size?` (`'sm' | 'md'`, default `'md'`): Tab height: `sm` is 24px, `md` is 28px. - `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own. - `title?` (`string`): Native tooltip of the tab. - `trailing?` (`ReactNode`): Inside the tab (its accessible name includes it): the count badge. Source: [ui/src/components/TabPill.tsx:74](https://github.com/Tahul/zidane/blob/main/ui/src/components/TabPill.tsx#L74) ## Interfaces ### `CountBadgeProps` Interface. Props for [`CountBadge`](https://zidane.si/docs/reference/ui-components-tab-pill.md#CountBadge). ```ts interface CountBadgeProps ``` **Properties** - `className?` (`string`): Extra classes on the root element. - `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own. - `text` (`string`): The count or short label to show. - `tone` (`CountTone`): Look of the badge, see [`CountTone`](https://zidane.si/docs/reference/ui-components-tab-pill.md#CountTone). Source: [ui/src/components/TabPill.tsx:151](https://github.com/Tahul/zidane/blob/main/ui/src/components/TabPill.tsx#L151) ### `TabPillProps` Interface. Props for [`TabPill`](https://zidane.si/docs/reference/ui-components-tab-pill.md#TabPill). ```ts interface TabPillProps ``` **Properties** - `className?` (`string`): Extra classes on the wrapping element. - `closeAlways?` (`boolean`, default `false`): Show the close button always, not only on hover or focus. - `closeLabel` (`string`): Accessible name and tooltip of the close button. - `keyShortcuts?` (`string`): Keyboard shortcut of the tab, announced through `aria-keyshortcuts`, such as `Control+1`. - `label` (`ReactNode`): Content of the tab. - `leading?` (`ReactNode`): Content before the label, such as a file icon. - `lifted?` (`boolean`): Raised without being selected (the pill being dragged). - `marker?` (`ReactNode`): Overlay on the close button's corner, such as an unsaved or updated dot. - `onAuxClick?` (`(e: MouseEvent) => void`): Called on a non-primary click on the tab, such as a middle-click. - `onClose` (`() => void`): Called when the close button is clicked, or on Delete or Backspace on the focused tab. - `onContextMenu?` (`(e: MouseEvent) => void`): Called on a right-click on the tab. - `onKeyDown?` (`(e: KeyboardEvent) => void`): Called on key down on the tab, before the built-in Delete and Backspace handling. Call `preventDefault` to skip it. - `onSelect` (`() => void`): Called when the tab is clicked. - `selected` (`boolean`): Whether this is the current tab. Sets `aria-selected` and the raised chip. - `size?` (`'sm' | 'md'`, default `'md'`): Tab height: `sm` is 24px, `md` is 28px. - `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own. - `title?` (`string`): Native tooltip of the tab. - `trailing?` (`ReactNode`): Inside the tab (its accessible name includes it): the count badge. Source: [ui/src/components/TabPill.tsx:19](https://github.com/Tahul/zidane/blob/main/ui/src/components/TabPill.tsx#L19) ## Types ### `CountTone` Type. Look of a [`CountBadge`](https://zidane.si/docs/reference/ui-components-tab-pill.md#CountBadge): `attention`, `info` or `neutral`. ```ts type CountTone = 'attention' | 'info' | 'neutral' ``` Source: [ui/src/components/TabPill.tsx:148](https://github.com/Tahul/zidane/blob/main/ui/src/components/TabPill.tsx#L148)