# `LineaUI.Components.Steps`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/steps.ex#L1)

LineOne's steps: numbered or plain points joined by a line, horizontal or vertical.

    <.steps>
      <:step label="Cart">1</:step>
      <:step label="Shipping">2</:step>
      <:step label="Payment">3</:step>
    </.steps>

    <.steps color="primary" orientation="vertical" line_space>
      <:step label="Ordered">1</:step>
      <:step label="Shipped">2</:step>
    </.steps>

    <.steps size="xs" line_space>
      <:step label="Done" color="primary" />
      <:step label="Now" color="secondary" ping />
      <:step label="Next" />
    </.steps>

`color` paints every point and the line between them; a step's own `color` paints only its
point. The content of a step is what its point shows (a number, an icon or nothing).

# `steps`

Renders a list of steps. Each `:step` is a point (showing the slot's content) with an
optional `label` under it, or beside it when vertical.

    <.steps color="primary">
      <:step label="Cart">1</:step>
      <:step label="Shipping" current>2</:step>
      <:step label="Payment">3</:step>
    </.steps>

## Attributes

* `color` (`:string`) - Paints every point and the line between them. Defaults to `"neutral"`. Must be one of `"neutral"`, `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, or `"error"`.
* `orientation` (`:string`) - Defaults to `"horizontal"`. Must be one of `"horizontal"`, or `"vertical"`.
* `size` (`:string`) - `xs` and `sm` are bare dots with small labels. Defaults to `"md"`. Must be one of `"xs"`, `"sm"`, `"md"`, or `"lg"`.
* `line_space` (`:boolean`) - Leaves a gap between the points and the line. Defaults to `false`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `step` (required) - One step; its content is what the point shows. Accepts attributes:

  * `label` (`:string`) - The text under (or beside) the point.
  * `color` (`:string`) - The color of this step's point.
  * `ping` (`:boolean`) - A pulsing ring around the point.
  * `current` (`:boolean`) - Marks the step as the current one (`aria-current`).
  * `class` (`:any`)

---

*Consult [api-reference.md](api-reference.md) for complete listing*