# MStepperBottomBar

A stepper bottom bar is a persistent navigation component used to guide users through a multi-step process. It typically includes “Previous” and “Next” buttons, along with optional actions such as “Cancel” or “Validate”, ensuring a structured flow. This component is commonly used in forms, onboarding sequences, and checkout processes, improving usability by keeping navigation actions always accessible.


## Props

| Name | Description | Type | Default |
| --- | --- | --- | --- | 
| `modelValue` | Current step of the stepper compact. | `number` | `0` |
| `steps` | Total number of steps of the stepper compact. | `number` | `0` |
| `cancel` | If `true`, display the cancel button. | `boolean` | `true` |
| `cancelLabel` | Label for the cancel button. | `string` | `"Cancel"` |
| `previousLabel` | Label for the previous button. | `string` | `"Previous"` |
| `nextLabel` | Label for the next button. | `string` | `"Next"` |
| `validateLabel` | Label for the validate button. | `string` | `"Validate"` |

## Events

| Name | Description | Type |
| --- | --- | --- |
| `update:modelValue` | Emits when the step change. | [value: number] |
| `cancel` | Emits when the cancel button is clicked. | [] |
| `validate` | Emits when the validate button is clicked. | [] |

## Dependencies

### Depends on

- [MButton](../button)
- [MDivider](../divider)

### Graph

```mermaid
graph TD;
  MStepperBottomBar --> MButton
  MStepperBottomBar --> MDivider
style MStepperBottomBar fill:#008240,stroke:#333,stroke-width:4px
```