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

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

## Components

### `DiagnosticsChip`

Component.

Shows a file's check state in its header: a spinner, a check mark, counts by severity, or a
dashed or warning circle when nothing checks the file or every check failed.

```ts
function DiagnosticsChip(props: DiagnosticsChipProps): Element
```

**Parameters**

- `props` (`DiagnosticsChipProps`): `state` and `items` pick what the chip shows; `label` is its tooltip; `onClick` its action.

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the root element.
- `items` (`readonly EditorDiagnostic[]`): The file's findings, counted by severity.
- `label` (`string`): The tooltip and the accessible name.
- `onClick?` (`() => void`): Called when the chip is pressed, for example to open the findings.
- `state` (`DiagnosticsChipState`): Where checking stands. Counts show only while `checked`.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/code/editor/DiagnosticsChip.tsx:40](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/DiagnosticsChip.tsx#L40)

## Interfaces

### `DiagnosticsChipProps`

Interface.

Props for [`DiagnosticsChip`](https://zidane.si/docs/reference/ui-code-editor-diagnostics-chip.md#DiagnosticsChip).

```ts
interface DiagnosticsChipProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.
- `items` (`readonly EditorDiagnostic[]`): The file's findings, counted by severity.
- `label` (`string`): The tooltip and the accessible name.
- `onClick?` (`() => void`): Called when the chip is pressed, for example to open the findings.
- `state` (`DiagnosticsChipState`): Where checking stands. Counts show only while `checked`.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/code/editor/DiagnosticsChip.tsx:19](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/DiagnosticsChip.tsx#L19)

## Types

### `DiagnosticsChipState`

Type.

`running`: a check is under way. `checked`: something checked the file
(counts, or a check mark when clean). `idle`: nothing checks this file.
`failed`: every check failed.

```ts
type DiagnosticsChipState = 'running' | 'checked' | 'idle' | 'failed'
```

Source: [ui/src/code/editor/DiagnosticsChip.tsx:16](https://github.com/Tahul/zidane/blob/main/ui/src/code/editor/DiagnosticsChip.tsx#L16)