# README

Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation. Steppers may display a transient feedback message after a step is saved

## Compatibility

| 🌏 Web | 🖥 Electron | 📱 React Native |
| :----: | :---------: | :-------------: |
|   ✔️   |      ✖      |        ✖        |

## Screenshots

|                   🌏 Web                  | 🖥 Electron | 📱 React Native |
| :---------------------------------------: | :---------: | :-------------: |
| ![web image](/files/-LSK1VQy8w_J_NRZ2TGq) |     TBD     |       TBD       |

## Universal Props

| Name       | Type   | Default | Description                                                                                         |
| ---------- | ------ | ------- | --------------------------------------------------------------------------------------------------- |
| activeStep | number |         | Set the active step (zero based index).Defines which dot is highlighted when the variant is 'dots'. |
| classes    | object |         | Useful to extend the style applied to components.                                                   |
| style      | object |         | Useful to extend the style applied to components.                                                   |
| steps      | number |         | The total steps for stepper                                                                         |

## Props

| Name       | Type      | Default        | Description                  |
| ---------- | --------- | -------------- | ---------------------------- |
| backButton | ReactNode |                | backButton prop for Stepper. |
| nextButton | ReactNode |                | nextButton prop for Stepper. |
| position   | enum      | 'top','bottom' | position for Stepper         |
| type       | enum      | 'dot','text'   | type prop for Stepper        |

## How to use

```javascript
import React from 'react';
import BR from '@blueeast/bluerain-os';

const StepperSample = (props) => (
    const Stepper = BR.Components.get('Stepper');
    const Button = BR.Components.get('Button');
    const backButton =<Button>back</Button>;
    const nextButton =<Button>next</Button>;
   return (
     <Stepper
      type="progress"
       activeStep={3}
       backButton={backButton}
       nextButton={nextButton}
       steps={6}  
        />
     );

export default StepperSample;
```


---

# 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://blueeast.gitbook.io/bluerain-plugin-material-ui/src/components/stepper.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.