# components/ZidaneMark (zidane-ui)

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

## Components

### `ZidaneMark`

Component.

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

```ts
function ZidaneMark(props: ZidaneMarkProps): Element
```

**Parameters**

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

**Returns** `Element`

**Props**

- `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`](https://zidane.si/docs/reference/ui-labels.md#useLabels).
- `size?` (`number`, default `16`): Width and height in pixels. Small marks draw fewer, wider bands.
- `speed?` (`number`, default `1.2`): Loops per second; 0 holds still.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `tone?` (`Tone`, default `'accent'`): Colour of the bands. `inherit` follows the surrounding text colour.

Source: [ui/src/components/ZidaneMark.tsx:80](https://github.com/Tahul/zidane/blob/main/ui/src/components/ZidaneMark.tsx#L80)

## Interfaces

### `ZidaneMarkProps`

Interface.

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

```ts
interface ZidaneMarkProps
```

**Properties**

- `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`](https://zidane.si/docs/reference/ui-labels.md#useLabels).
- `size?` (`number`, default `16`): Width and height in pixels. Small marks draw fewer, wider bands.
- `speed?` (`number`, default `1.2`): Loops per second; 0 holds still.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `tone?` (`Tone`, default `'accent'`): Colour of the bands. `inherit` follows the surrounding text colour.

Source: [ui/src/components/ZidaneMark.tsx:27](https://github.com/Tahul/zidane/blob/main/ui/src/components/ZidaneMark.tsx#L27)