UI kit reference

components/Notice

import { … } from 'zidane-ui'ui/src/components/Notice.tsx

Components#

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

TypeScript

function Notice(props: NoticeProps): Element

Parameters
Name	Type	Description
props	`NoticeProps`	`NoticeProps`.

Element

Notice props
Name	Type	Description
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`.

Props for Notice.

TypeScript

interface NoticeProps

NoticeProps properties
Name	Type	Description
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`.

How serious a Notice is.

TypeScript

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