# components/PanelEmpty (zidane-ui)

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

## Components

### `PanelEmpty`

Component.

Renders an empty or error state for a side panel tab: an [`EmptyState`](https://zidane.si/docs/reference/ui-components-surface.md#EmptyState) inset from the
panel edges and centred in the remaining height.

```ts
function PanelEmpty(props: PanelEmptyProps): Element
```

**Parameters**

- `props` (`PanelEmptyProps`): Component props.

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the root element.
- `hint?` (`ReactNode`): Secondary text under the title.
- `icon?` (`string`): Icon class shown above the title, such as `i-ph-files`.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `title` (`ReactNode`): Main message. It takes the warning colour when `warn` is set.
- `warn?` (`boolean`): An error in place of content.

Source: [ui/src/components/PanelEmpty.tsx:34](https://github.com/Tahul/zidane/blob/main/ui/src/components/PanelEmpty.tsx#L34)

### `PanelLoading`

Component.

Renders a centred spinner with a loading label for a side panel tab.

```ts
function PanelLoading(props: PanelLoadingProps): Element
```

**Parameters**

- `props` (`PanelLoadingProps`): 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.

Source: [ui/src/components/PanelEmpty.tsx:64](https://github.com/Tahul/zidane/blob/main/ui/src/components/PanelEmpty.tsx#L64)

## Interfaces

### `PanelEmptyProps`

Interface.

Props for [`PanelEmpty`](https://zidane.si/docs/reference/ui-components-panel-empty.md#PanelEmpty).

```ts
interface PanelEmptyProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.
- `hint?` (`ReactNode`): Secondary text under the title.
- `icon?` (`string`): Icon class shown above the title, such as `i-ph-files`.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `title` (`ReactNode`): Main message. It takes the warning colour when `warn` is set.
- `warn?` (`boolean`): An error in place of content.

Source: [ui/src/components/PanelEmpty.tsx:13](https://github.com/Tahul/zidane/blob/main/ui/src/components/PanelEmpty.tsx#L13)

### `PanelLoadingProps`

Interface.

Props for [`PanelLoading`](https://zidane.si/docs/reference/ui-components-panel-empty.md#PanelLoading).

```ts
interface PanelLoadingProps
```

**Properties**

- `className?` (`string`): Extra classes on the root element.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/PanelEmpty.tsx:52](https://github.com/Tahul/zidane/blob/main/ui/src/components/PanelEmpty.tsx#L52)