Aqua Basis

The AqSettingStepcomponent represents a configurable step within a multi-step process or settings flow.

It is designed to display a step title, description, optional interactive actions, and a content slot for embedding additional UI elements.

image 1.png

<aq-setting-step>
  <div slot="edit-step-1">
    <aq-helper-text>Editing step 1</aq-helper-text>
  </div>
  <div slot="summary-step-1">
    <aq-helper-text>Summary step 1</aq-helper-text>
  </div>

  <div slot="edit-step-2">
    <aq-helper-text>Editing</aq-helper-text>
  </div>
  <div slot="summary-step-2">
    <aq-helper-text>Summary step 2</aq-helper-text>
  </div>

  <div slot="edit-step-3">
    <aq-helper-text>Editing</aq-helper-text>
  </div>
  <div slot="summary-step-3">
    <aq-helper-text>Summary step 3</aq-helper-text>
  </div>
</aq-setting-step>

Props and Attributes

Prop / Attr	Type	Default	Description
`options`	`StepOption[]`	`[]`	Mutable property containing the step configuration. This can define the title, description, actions, and slot content behavior.

A StepOption is an object constructed as follows:

{
  id: string;               // Unique identifier of the step, e.g. "step-1"
  title: string;            // Main title of the step
  state: 'default' | 'error' | 'success' | 'warning'; // Status inside the header of the step element
  stepStatus?: "is-default" | "is-active" | "is-complete" | "is-error" | "is-active-with-error"; // Status of the step circle in the left column
  subtitle?: string;        // Subtitle or short description
  info?: string;            // Additional info text
  buttonEdit?: string;      // Text for edit button
  buttonPrimary?: string;   // Text for primary button
  buttonSecondary?: string; // Text for secondary button
  buttonTertiary?: string;  // Text for tertiary button
  contentState?: "editing" | "summary"; // Controls which content is displayed
}

PlayGround

You can interact with the component and experiment with its attributes and properties directly in this playground.

In the Code tab, the generated code snippet is available.

In addition to the interactive examples in this documentation, you can explore the full playground with all supported options and advanced configurations at the following link:

👉 Open full playground

https://aqua-ds-playground.masivianlabs.com/doc-storybook/index.html?path=/story/components-data-aqsettingstep--default&nav=0

<aside> ⚠️

Important: The code shown is in Web Component format. If you are using a specific framework (Vue, React, Angular), you must adapt it to the framework’s conventions before using it.

</aside>

Events

Event	Description	React	Angular	Vue	Vanilla
`clickPrimary`	Triggered when the primary button is clicked.	`onClickPrimary={(e) => handleClick(e, 'primary')}`	`(clickPrimary)="handleClick($event, 'primary')"`	`@clickPrimary="handleClick($event, 'primary')"`	`addEventListener('clickPrimary', handler)`
`clickSecondary`	Triggered when the secondary button is clicked.	`onClickSecondary={(e) => handleClick(e, 'secondary')}`	`(clickSecondary)="handleClick($event, 'secondary')"`	`@clickSecondary="handleClick($event, 'secondary')"`	`addEventListener('clickSecondary', handler)`
`clickTertiary`	Triggered when the tertiary button is clicked.	`onClickTertiary={(e) => handleClick(e, 'tertiary')}`	`(clickTertiary)="handleClick($event, 'tertiary')"`	`@clickTertiary="handleClick($event, 'tertiary')"`	`addEventListener('clickTertiary', handler)`
`clickEdit`	Triggered when the edit button is clicked.	`onClickEdit={(e) => handleClick(e, 'edit')}`	`(clickEdit)="handleClick($event, 'edit')"`	`@clickEdit="handleClick($event, 'edit')"`	`addEventListener('clickEdit', handler)`

Event Types

Event	React/Angular/Vue
`clickPrimary`	`(e:CustomEvent)`
`clickSecondary`	`(e:CustomEvent)`
`clickTertiary`	`(e:CustomEvent)`
`clickEdit`	`(e:CustomEvent)`

Slots

The options prop takes an array of objects, where each object represents a step.

Example of a step object inside options:

{
  id: string;               // Unique identifier of the step, e.g. "step-1"
  title: string;            // Main title of the step
  state: 'default' | 'error' | 'success' | 'warning'; // Status inside the header of the step element
  stepStatus?: "is-default" | "is-active" | "is-complete" | "is-error" | "is-active-with-error"; // Status of the step circle in the left column
  subtitle?: string;        // Subtitle or short description
  info?: string;            // Additional info text
  buttonEdit?: string;      // Text for edit button
  buttonPrimary?: string;   // Text for primary button
  buttonSecondary?: string; // Text for secondary button
  buttonTertiary?: string;  // Text for tertiary button
  contentState?: "editing" | "summary"; // Controls which content is displayed
}

👉 The most important property is contentState, which decides what content is rendered for the step:

"editing" → renders the slot edit-step-{id}

"summary" → renders the slot summary-step-{id}

"initial" or undefined → renders only the Step Header (title, subtitle, info), with no slot content and no action buttons

Using slots for dynamic content

Said that, each step can have two possible slots:

edit-{id} → Content when the step is in editing mode
summary-{id} → Content when the step is in summary mode

Where {id} is the step’s identifier (e.g. step-1, step-2, etc.).

⚠️ The slot name must exactly match the step id defined in options.

Example

<aq-setting-step
  options='[
    { "id": "step-1", "title": "Step 1", "contentState": "summary" },
    { "id": "step-2", "title": "Step 2", "contentState": "editing" },
    { "id": "step-3", "title": "Step 3", "contentState": "summary" }
  ]'
>
  <!-- STEP 1 -->
  <div slot="edit-step-1">
    <aq-helper-text>Editing step 1</aq-helper-text>
  </div>
  <div slot="summary-step-1">
    <aq-helper-text>Summary step 1</aq-helper-text>
  </div>

  <!-- STEP 2 -->
  <div slot="edit-step-2">
    <aq-helper-text>Editing step 2</aq-helper-text>
  </div>
  <div slot="summary-step-2">
    <aq-helper-text>Summary step 2</aq-helper-text>
  </div>

  <!-- STEP 3 -->
  <!-- No slots provided → Step 3 will only render the Step Header -->
</aq-setting-step>

In this example:

Step 1 will display the summary-step-1 slot
Step 2 will display the edit-step-2 slot
Step 3 will fall back to "initial" mode → only the Step Header is shown, no content, no buttons.

Good to know

Named Slots: Each slot attribute identifies where the content will be rendered inside the component.
Dynamic Slot Naming: The names like edit-step-1 or summary-step-2 allow you to target specific steps and states.
Content Control: You can place any HTML or component inside the slot, making it highly customizable.

In Frameworks

Web Components

<aq-setting-step id="aq-setting-step-test-1">
  <div slot="edit-step-1">
    <aq-helper-text>Editing step 1</aq-helper-text>
  </div>
  <div slot="summary-step-1">
    <aq-helper-text>Summary step 1</aq-helper-text>
  </div>

  <div slot="edit-step-2">
    <aq-helper-text>Editing</aq-helper-text>
  </div>
  <div slot="summary-step-2">
    <aq-helper-text>Summary step 2</aq-helper-text>
  </div>
</aq-setting-step>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const settingStepElem = document.getElementById('aq-setting-step-test-1');
    settingStepElem.addEventListener('clickTertiary', (e) => {
      console.log('Clicked Tertiary button on SettingStep ' + e.detail);
    })
    settingStepElem.addEventListener('clickSecondary', (e) => {
      console.log('Clicked Secondary button on SettingStep ' + e.detail);
    })
    settingStepElem.addEventListener('clickPrimary', (e) => {
      console.log('Clicked Primary button on SettingStep ' + e.detail);
    })
    settingStepElem.addEventListener('clickEdit', (e) => {
      console.log('Clicked Edit button on SettingStep ' + e.detail);
    })

    const data = document.querySelector('aq-setting-step');
    if (data) {
      data.options = [
        {
          id: "step-1",
          title: "Step 1",
          subtitle: "Description of the step",
          info: "Info",
          state: "default",
          stepStatus: "is-complete",
          buttonEdit: "Editar",
          buttonPrimary: "Primary",
          contentState: "editing",
          buttonTertiary: "Tertiary",
          buttonSecondary: "Secondary"
        },
        {
          id: "step-2",
          title: "Step 2",
          subtitle: "Description of the step",
          info: "Info",
          state: "success",
          stepStatus: "is-active",
          buttonEdit: "Edit",
          buttonPrimary: "Primary",
          contentState: "summary",
          buttonTertiary: "",
          buttonSecondary: ""
        },
        {
          id: "step-3",
          title: "Step 3",
          subtitle: "Description of the step",
          info: "Info",
          state: "error",
          stepStatus: "is-error",
          buttonSecondary: "Descartar",
          buttonEdit: "Edit"
        },
      ]
    }
  });
</script>

Vue

<script lang="ts">
	import { AqSettingStep } from 'vue';
	import { defineComponent } from 'vue';

	const options = [
    {
      id: "step-1",
      title: "Step 1",
      subtitle: "Description of the step",
      info: "Info",
      state: "default",
      stepStatus: "is-complete",
      buttonEdit: "Editar",
      buttonPrimary: "Primary",
      contentState: "editing",
      buttonTertiary: "Tertiary",
      buttonSecondary: "Secondary"
    },
    {
      id: "step-2",
      title: "Step 2",
      subtitle: "Description of the step",
      info: "Info",
      state: "success",
      stepStatus: "is-active",
      buttonEdit: "Edit",
      buttonPrimary: "Primary",
      contentState: "summary",
      buttonTertiary: "",
      buttonSecondary: ""
    },
    {
      id: "step-3",
      title: "Step 3",
      subtitle: "Description of the step",
      info: "Info",
      state: "error",
      stepStatus: "is-error",
      buttonSecondary: "Descartar",
      buttonEdit: "Edit"
    },
  ];
	const slotEdit = (id: string) => {
	  return `edit-${id}`;
	};
	const slotSummary = (id: string) => {
	  return `summary-${id}`;
	};

	export default defineComponent({
	  components: {
	    AqSettingStep,
	  },
	  setup() {
	    return {
	      options,
	      slotEdit,
	      slotSummary,
	    };
	  },
	});
</script>

<template>
	<div>
    <aq-setting-step
      :options="options"
      @clickEdit="(e) => console.log('edit ', e)"
      @clickPrimary="(e) => console.log('Primary ', e)"
      @clickSecondary="(e) => console.log('Secondary ', e)"
      @clickTertiary="(e) => console.log('Tertiary ', e)"
    >
      <template v-for="(item, index) in options" :key="index">
        <div :slot="slotEdit(item.id)">
          <span>Editing</span>
        </div>
        <div :slot="slotSummary(item.id)">
	        <span>Summary</span>
			</template>
    </aq-setting-step>
	</div>
</template>

React

import {
  AqSettingStep
} from '@aqua-ds/react';

export const SettingStepSet = () => {
  const options = [
    {
      id: "step-1",
      title: "Step 1",
      subtitle: "Description of the step",
      info: "Info",
      state: "default",
      stepStatus: "is-complete",
      buttonEdit: "Editar",
      buttonPrimary: "Primary",
      contentState: "editing",
      buttonTertiary: "Tertiary",
      buttonSecondary: "Secondary"
    },
    {
      id: "step-2",
      title: "Step 2",
      subtitle: "Description of the step",
      info: "Info",
      state: "success",
      stepStatus: "is-active",
      buttonEdit: "Edit",
      buttonPrimary: "Primary",
      contentState: "summary",
      buttonTertiary: "",
      buttonSecondary: ""
    },
    {
      id: "step-3",
      title: "Step 3",
      subtitle: "Description of the step",
      info: "Info",
      state: "error",
      stepStatus: "is-error",
      buttonSecondary: "Descartar",
      buttonEdit: "Edit"
    },
  ];

  return (
    <>
        <AqSettingStep
          options={options}
          onClickEdit={(e) => console.log('edit ', e)}
          onClickPrimary={(e) => console.log('Primary ', e)}
          onClickSecondary={(e) => console.log('Secondary ', e)}
          onClickTertiary={(e) => console.log('Tertiary ', e)}
          >
          {options.map((item, index) => (
            <Fragment key={index}>
              {/* Define edit content */}
              <div slot={`edit-${item.id}`}>
                <span>Editing</span>
              </div>

              {/* Define summary content */}
              <div slot={`summary-${item.id}`}>
                <span>Summary</span>
              </div>
            </Fragment>
          ))}
        </AqSettingStep>
    </>
  );
};

Angular

// setting-step-set.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AqSettingStep } from '@aqua-ds/angular';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-setting-step-set',
  imports: [CommonModule, AqSettingStep, FormsModule, ReactiveFormsModule],
  templateUrl: './setting-step-set.component.html',
})
export class SettingStepComponentSet {
  options = [
    {
      id: "step-1",
      title: "Step 1",
      subtitle: "Description of the step",
      info: "Info",
      state: "default",
      stepStatus: "is-complete",
      buttonEdit: "Editar",
      buttonPrimary: "Primary",
      contentState: "editing",
      buttonTertiary: "Tertiary",
      buttonSecondary: "Secondary"
    },
    {
      id: "step-2",
      title: "Step 2",
      subtitle: "Description of the step",
      info: "Info",
      state: "success",
      stepStatus: "is-active",
      buttonEdit: "Edit",
      buttonPrimary: "Primary",
      contentState: "summary",
      buttonTertiary: "",
      buttonSecondary: ""
    },
    {
      id: "step-3",
      title: "Step 3",
      subtitle: "Description of the step",
      info: "Info",
      state: "error",
      stepStatus: "is-error",
      buttonSecondary: "Descartar",
      buttonEdit: "Edit"
    },
  ];
  slotEdit = (id: string) => {
    return `edit-${id}`;
  };
  slotSummary = (id: string) => {
    return `summary-${id}`;
  };
}

<!-- setting-step-set.component.html -->
<div class="container">
  <div class="section">
    <div class="section-title">Step Group</div>
    <div class="components">
      <aq-setting-step [options]="options">
        <ng-container>
          @for (item of options; track item.id) {
            <div [attr.slot]="'edit-' + item.id">
	            <span>Editing</span>
            </div>
            <div [attr.slot]="'summary-' + item.id">
              <span>Summary</span>
            </div>
          }
        </ng-container>
      </aq-setting-step>
    </div>
  </div>
</div>