# 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]:


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/miniwizard/code/subcomponents.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.