UI kit reference

components/ZidaneMark

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

Components#

Renders the zidane mark, its bands flowing while speed is above 0 and motion is on.

TypeScript

function ZidaneMark(props: ZidaneMarkProps): Element

Parameters
Name	Type	Description
props	`ZidaneMarkProps`	Component props.

Element

ZidaneMark props
Name	Type	Default	Description
className?	`string`		Extra classes on the root.
decorative?	`boolean`		Hidden from assistive tech, for a mark inside an element that names the state itself.
label?	`string`		Accessible name and tooltip. Defaults to the `working` label from `useLabels`.
size?	`number`	`16`	Width and height in pixels. Small marks draw fewer, wider bands.
speed?	`number`	`1.2`	Loops per second; 0 holds still.
style?	`CSSProperties`		Inline styles on the root element, merged after the component's own.
tone?	`Tone`	`'accent'`	Colour of the bands. `inherit` follows the surrounding text colour.

TypeScript

interface ZidaneMarkProps

ZidaneMarkProps properties
Name	Type	Default	Description
className?	`string`		Extra classes on the root.
decorative?	`boolean`		Hidden from assistive tech, for a mark inside an element that names the state itself.
label?	`string`		Accessible name and tooltip. Defaults to the `working` label from `useLabels`.
size?	`number`	`16`	Width and height in pixels. Small marks draw fewer, wider bands.
speed?	`number`	`1.2`	Loops per second; 0 holds still.
style?	`CSSProperties`		Inline styles on the root element, merged after the component's own.
tone?	`Tone`	`'accent'`	Colour of the bands. `inherit` follows the surrounding text colour.