# components/Notice (zidane-ui)

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

## Components

### `Notice`

Component.

Renders a toned message: glyph, the words, an optional action, and the raw detail folded away.

```ts
function Notice(props: NoticeProps): Element
```

**Parameters**

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

**Returns** `Element`

**Props**

- `action?` (`ReactNode`): A control after the message (Retry, Open settings).
- `children` (`ReactNode`): The message, worded for people.
- `className?` (`string`): Extra classes on the root element.
- `compact?` (`boolean`): One tight line, for a row or a form field. Default: a block with room around it.
- `detail?` (`string`): The raw words behind it (an exception's message, a server's answer): folded under Details.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `tone` (`NoticeTone`): How serious it is: the glyph, the colour, and `alert` (error) or `status`.

Source: [ui/src/components/Notice.tsx:45](https://github.com/Tahul/zidane/blob/main/ui/src/components/Notice.tsx#L45)

## Interfaces

### `NoticeProps`

Interface.

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

```ts
interface NoticeProps
```

**Properties**

- `action?` (`ReactNode`): A control after the message (Retry, Open settings).
- `children` (`ReactNode`): The message, worded for people.
- `className?` (`string`): Extra classes on the root element.
- `compact?` (`boolean`): One tight line, for a row or a form field. Default: a block with room around it.
- `detail?` (`string`): The raw words behind it (an exception's message, a server's answer): folded under Details.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `tone` (`NoticeTone`): How serious it is: the glyph, the colour, and `alert` (error) or `status`.

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

## Types

### `NoticeTone`

Type.

How serious a [`Notice`](https://zidane.si/docs/reference/ui-components-notice.md#Notice) is.

```ts
type NoticeTone = 'error' | 'warning' | 'info'
```

Source: [ui/src/components/Notice.tsx:14](https://github.com/Tahul/zidane/blob/main/ui/src/components/Notice.tsx#L14)