> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/miniwizard/code/subcomponents.md).

# SubComponents

### Step

The Step subcomponent, takes the content, and the `Footer` rendered on each step.

### Step API

This subcomponent extends the native [\<div>](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) API. That's why the className prop is not included in the table.

<table><thead><tr><th width="200">Props</th><th>Type</th><th>Required</th></tr></thead><tbody><tr><td><code>children</code></td><td><code>ReactNode</code></td><td>✅ </td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>✅ </td></tr><tr><td><code>isDisabled</code></td><td><code>boolean</code></td><td>❌</td></tr><tr><td><code>onClick</code></td><td><code>() => void</code></td><td><a data-footnote-ref href="#user-content-fn-1">❌</a></td></tr></tbody></table>

<details>

<summary>children</summary>

The children has 2 main divisions, first, the content you want to add, which can be a string, or a `ReactElement` and then, the `<MiniWizad.Footer>` to render elements in the footer,

</details>

<details>

<summary>title</summary>

A string used to render the step title.

</details>

<details>

<summary>isDisabled</summary>

Boolean to control if the step takes a disabled state.

</details>

<details>

<summary>onClick</summary>

Function executed when a `Step` is clicked, mainly used when changing the `selectedStep`

</details>

### Footer

An space to render custom elements in the MiniWizard footer, mainly buttons.

### Footer API

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

### Button

You can use the `MiniWizard.Button` when passing a children to the `Footer` subcomponent, without importing the `Button` itself.

```tsx
<MiniWizard.StepNavigation>
    <MiniWizard.Button>Next</MiniWizard.Button>
    <MiniWizard.Button>Cancel</MiniWizard.Button>
</MiniWizard.StepNavigation>
```

### ReviewStepSection

The `ReviewStepSection` subcomponent, is not required and can be omitted, it was made to simplify the steps `review + confirm.` You can use it to reduce the amount of work, or if you are using a `review + confirm` alike step.

### ReviewStepSection API

This subcomponent extends the native [\<div>](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) API. That's why the className prop is not included in the table.

<table><thead><tr><th>Props</th><th>Type</th><th>Required</th><th data-hidden></th></tr></thead><tbody><tr><td><code>children</code></td><td><code>ReactNode</code></td><td>✅</td><td></td></tr><tr><td><code>heading</code></td><td><code>ReactNode</code></td><td>✅</td><td></td></tr><tr><td><code>onButtonClick</code></td><td><code>() => void</code></td><td>✅</td><td></td></tr></tbody></table>

<details>

<summary>children</summary>

The element displayed below the title and button border.

</details>

<details>

<summary>heading</summary>

Controls the heading content.

</details>

<details>

<summary>onButtonClick</summary>

A function that is called when the edit icon button is clicked..

</details>

[^1]: