# Steps (/docs/products/dash-dots/reference/components/steps)

Put a `Step` inside it for each stage.

**Children:** Components

## Example

![The Steps component](/assets/images/dash-dots/components/steps.webp)

```xml title="view.dml"
<Steps>
  <Step title="Paid" text="Today, 09:41" status="done" />
  <Step title="Sent" text="On its way" status="current" />
  <Step title="Received" status="upcoming" />
</Steps>
```

## Props

| Prop                                                                   | Type                                                             | What it is                                        |
| ---------------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------- |
| `padding`, `paddingTop`, `paddingStart`, `paddingEnd`, `paddingBottom` | [spacing](/docs/products/dash-dots/reference/components#spacing) | Space inside its edges, all round or on one side. |

## Events

None.