mi6 / mi6/ic-ui-kit

Adding error variant to Ic-Stepper

Open
#3,296 4 comments 0 reactions 1 assignee View on GitHub

@GCHQ-Developer-299 is already working on this.

Since Apr 15, 2026.

component: ic-step component: ic-stepper good first issue
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

Summary

Adding error and warning options for Ic-Stepper

💬 Description

Currently Ic-Stepper only has blue for current and green for success. Adding options for error and warning to reflect the state of that page.

💰 Use value

It will help give it more functionality and allow for users to clearly see if there are warnings or errors on certain pages. Increases the usability of steppers and users can clearly see which pages have issues. Users don't have to click through the pages to see issues, they can simply tell from the stepper that a certain page has issues.

📝 Acceptance Criteria

If a page has required fields for example and they haven't been filled but other boxes on that page perhaps have been filled, the stepper should indicate theres an error on that page.
If a page has a reason to showing a yellow alert, then in the stepper that page icon should indicate warning.

✏ Designs

If there's a Figma design file (or other mock-up), include it here.

## 🧾 Guidance
If there's written guidance or documentation, include a link to it here.

Additional info

Tell us anything else useful to help us understand your suggestion.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.