# components/StepFrame (zidane-ui)

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

## Components

### `StepActions`

Component.

The usual step footer: Back on the left, and Skip and Continue on the right. Continue has its
`↵` keycap. A missing handler hides its button.

```ts
function StepActions(props: StepActionsProps): Element
```

**Parameters**

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

**Returns** `Element`

**Props**

- `busy?` (`boolean`): Continue is working. It shows as pressed, and the user cannot press it again.
- `className?` (`string`): Extra classes on the root element.
- `continueDisabled?` (`boolean`): The user cannot press Continue yet, such as before a provider is ready.
- `continueLabel?` (`ReactNode`): Text of the Continue button. Defaults to the `continue` label.
- `note?` (`ReactNode`): Muted text before the buttons on the right, such as why Continue is off.
- `onBack?` (`() => void`): Goes to the previous step. Absent: no Back button.
- `onContinue?` (`() => void`): Moves on. Absent: no Continue button.
- `onSkip?` (`() => void`): Leaves this step's choices as they were and moves on. Absent: no Skip button.
- `skipLabel?` (`ReactNode`): Text of the Skip button. Defaults to the `skip` label.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/StepFrame.tsx:99](https://github.com/Tahul/zidane/blob/main/ui/src/components/StepFrame.tsx#L99)

### `StepFrame`

Component.

Renders a wizard step's page: its heading, its body, an optional side pane, and a footer.

```ts
function StepFrame(props: StepFrameProps): Element
```

**Parameters**

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

**Returns** `Element`

**Props**

- `aside?` (`ReactNode`): A side pane, such as a live preview: beside the body from 1024px wide, pinned 48px below the top of the scroller as the body scrolls, and under the body below that width.
- `children?` (`ReactNode`): The step's body.
- `className?` (`string`): Extra classes on the page.
- `eyebrow?` (`ReactNode`): Small label above the title, such as the step's name.
- `footer?` (`ReactNode`): The footer, usually [`StepActions`](https://zidane.si/docs/reference/ui-components-step-frame.md#StepActions).
- `lede?` (`ReactNode`): One sentence under the title.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `title` (`ReactNode`): The step's question or heading.

Source: [ui/src/components/StepFrame.tsx:41](https://github.com/Tahul/zidane/blob/main/ui/src/components/StepFrame.tsx#L41)

## Interfaces

### `StepActionsProps`

Interface.

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

```ts
interface StepActionsProps
```

**Properties**

- `busy?` (`boolean`): Continue is working. It shows as pressed, and the user cannot press it again.
- `className?` (`string`): Extra classes on the root element.
- `continueDisabled?` (`boolean`): The user cannot press Continue yet, such as before a provider is ready.
- `continueLabel?` (`ReactNode`): Text of the Continue button. Defaults to the `continue` label.
- `note?` (`ReactNode`): Muted text before the buttons on the right, such as why Continue is off.
- `onBack?` (`() => void`): Goes to the previous step. Absent: no Back button.
- `onContinue?` (`() => void`): Moves on. Absent: no Continue button.
- `onSkip?` (`() => void`): Leaves this step's choices as they were and moves on. Absent: no Skip button.
- `skipLabel?` (`ReactNode`): Text of the Skip button. Defaults to the `skip` label.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/StepFrame.tsx:70](https://github.com/Tahul/zidane/blob/main/ui/src/components/StepFrame.tsx#L70)

### `StepFrameProps`

Interface.

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

```ts
interface StepFrameProps
```

**Properties**

- `aside?` (`ReactNode`): A side pane, such as a live preview: beside the body from 1024px wide, pinned 48px below the top of the scroller as the body scrolls, and under the body below that width.
- `children?` (`ReactNode`): The step's body.
- `className?` (`string`): Extra classes on the page.
- `eyebrow?` (`ReactNode`): Small label above the title, such as the step's name.
- `footer?` (`ReactNode`): The footer, usually [`StepActions`](https://zidane.si/docs/reference/ui-components-step-frame.md#StepActions).
- `lede?` (`ReactNode`): One sentence under the title.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `title` (`ReactNode`): The step's question or heading.

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