# components/Restricted (zidane-ui)

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

## Components

### `Restricted`

Component.

Renders `children` dimmed and inert, with `reason` as a tooltip, while `restricted`; else as they are.

```ts
function Restricted(props: RestrictedProps): Element
```

**Parameters**

- `props` (`RestrictedProps`): [`RestrictedProps`](https://zidane.si/docs/reference/ui-components-restricted.md#RestrictedProps).

**Returns** `Element`

**Props**

- `children` (`ReactNode`): What it wraps.
- `className?` (`string`): Classes merged on the root while restricted.
- `inline?` (`boolean`): Wrap inline content (a button in a row) instead of a block (a section).
- `reason` (`string`): Why, short: the tooltip and the group's accessible name ("Admin only").
- `restricted` (`boolean`): Whether this connection may not change what it wraps.
- `style?` (`CSSProperties`): Inline styles on the root while restricted.

Source: [ui/src/components/Restricted.tsx:37](https://github.com/Tahul/zidane/blob/main/ui/src/components/Restricted.tsx#L37)

## Interfaces

### `RestrictedProps`

Interface.

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

```ts
interface RestrictedProps
```

**Properties**

- `children` (`ReactNode`): What it wraps.
- `className?` (`string`): Classes merged on the root while restricted.
- `inline?` (`boolean`): Wrap inline content (a button in a row) instead of a block (a section).
- `reason` (`string`): Why, short: the tooltip and the group's accessible name ("Admin only").
- `restricted` (`boolean`): Whether this connection may not change what it wraps.
- `style?` (`CSSProperties`): Inline styles on the root while restricted.

Source: [ui/src/components/Restricted.tsx:17](https://github.com/Tahul/zidane/blob/main/ui/src/components/Restricted.tsx#L17)